1、开发语言
微信小程序主要开发语言是 javascript;
使用 wxml + wxss 文件来描述界面;
使用 app.json + app.wxss 文件来配置项目;
2、wxml、wxss 是什么?
对于 Android 来说,对于页面的描述基本上在 xml 中定义的,比如:
页面结构: 一个 id 为 layout 的 FrameLayout, 它的内部包含一个 id 为 textViewHello 的 TextView 。
页面样式: FrameLayout 和 TextView 各自的属性:width、height,TextView 还有字号、颜色、文字内容等。
而微信小程序所使用的 wxml + wxss 方式:
some.wxml:
张三
some.wxss:
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-nickname {
width: 128rpx;
color: #aaa;
}
很明显可以看出:wxml 是负责了页面结构的展示;而 wxss 则负责了对页面样式的定义。
这种把结构和样式分离的做法,其实是延续了网页开发中的习惯(html + css)。
这样做的好处起码有两个:
一是使代码的职责划分更加明确,结构清晰。
二是可以避免许多重复的代码。(你在写 Android 的 xml 文件时,有没有经常碰到有许多重复的属性,需要抽离成一个 style 出去的?这就是基本是样式表的思想了)
3、app.js
app.js 基本相当于 Android 中的 Application 类,文件中主要是有一个 App()函数,来进行小程序的初始化操作。
它提供了一些关于整个小程序生命周期的回调函数: onLaunch、onShow、onHide、onError 等。 比如如果开发者有一些需要在小程序启动时执行的操作,就可以在 onLaunch 函数中执行。
【对比 Android】我们在 Application 的 onCreate 函数中的初始化操作。
它提供了一个 globalData,用以存储整个小程序使用期间的公共数据。
【对比 Android】有时候我们也会在自定义的 Application 放一些数据,供不同的页面来使用。
小程序提供了一个全局的 getApp() 方法用以获取小程序的 App 实例。
【对比 Android 】想一下 getApplication() 方法~ :-D
4、app.json
app.json 的作用跟 Android 中的 AndroidMainifest.xml 文件很相似 —— 都是静态化的配置文件。
【对比 Android 】Activity 也是同样需要在 AndroidMainifest.xml 文件中进行声明,另外 App 的主题也可以在这里设置。
5、app.wxss
app.wxss 定义全局的样式 —— 其定义的样式会作用于每个页面。比如在 app.wxss 中加入:
text {
padding:5px;
}
就可以给所有的 text 控件添加 5px 的 padding 。
当然,页面本身的 xxPage.wxss 可以定义局部样式来覆盖全局样式。
【对比 Android 】Android 中暂时没有类似 app.wxss 的全局设定,我们需要在每个 layout.xml 中定义每个控件的属性,即使可以用 style 文件来抽离一些统一的样式,但还是需要在每个 View 的属性上去设置使用这个 style —— 从这方面看,使用 wxss 更有优势一些。
6、util文件夹
根目录下的 utils 文件夹中有一个 util.js 文件,这个故名思意,是类似于 Java 中的一些工具类的存在。
utils 文件夹其实是一个非必须的结构,而它之所以出现在官方的 HelloWorld 工程中,是作为一个代表,表明了开发者在这里是可以自定义新的文件夹和结构的。微信小程序作为一个使用 js 来开发的平台,是可以使用许多第三方的 js 库的,对于这些第三方库,以及其他的图片资源等,都可以放到自定义的文件夹中。
7、pages 文件夹
pages 文件夹下包含两个子目录:index 和 logs ,两个目录的结构都是基本一样的,都是包含四个相同主名称的文件: xx.js、xx.wxml、xx.json、xx.wxss 这几个文件。
这样的一个典型结构表明它是一个小程序的页面,四个文件的作用分别是:
8、Android的业务逻辑都是写在Java文件里面,小程序里面都是写在js里面;同样的类似Android的页面生命周期,小程序也有生命周期:
onLoad: function(options) {
// 页面初始化
},
onReady: function() {
// 页面渲染完成
},
onShow: function() {
// 页面显示
},
onHide: function() {
// 页面推到后台
},
onUnload: function() {
// 页面关闭
},
小程序不像Android里面可以监听页面的返回键,所以要在页面返回时处理业务可以在onUnload中处理。
9、与Android中Application类相似,小程序中app.js相当于全局入口,如果开发者有需要在小程序启动时执行的操作,就可以在 onLaunch 方法中执行。
app.js还提供了一个 globalData,用来存储整个小程序使用期间的公共数据。
在其他页面可以通过 getApp() 方法用以获取小程序的 App 实例,来使用全局公共数据。
10、如果有些需要存储的简单数据,类似Android中的SharedPreferences,小程序可以使用wx.setStorageSync("key", value); 存储;wx.getStorageSync("key"); 取出;
11、页面之间的数据传递在小程序里面只能通过路由的方式,就是在跳转链接拼接上要传递的数据:
传数据:
//let obj = JSON.stringify(obj);
wx.navigateTo({
url: '/pages/index/index?id=' + id,
})
接受:
onLoad: function(options) {
// let obj = JSON.parse(options.obj);
let id = options.id;
}
如果要传递对象,则可以在传递前使用JSON.stringify(obj); 将数据转成字符串,在接受时使用JSON.parse(obj); 转换回对象;
12、数据刷新;在处理完数据后我们会用this.setData({...}) 来更新数据源,但是很多初学者都会犯一个错误,看如下错误代码:
wx.request({
url: "request_url",
success: function (res) {
this.setData({...})
}
});
按照上面写程序就会报错,再看正确代码:
let that = this;
wx.request({
url: "request_url",
success: function (res) {
that.setData({...})
}
});
两者区别在于多了一个变量 that,并且在 onLoad() 方法里面对它进行了赋值,使它等于 this。其实说白了就是一个作用域的问题;其实在Android里面我们也遇到过,就是在点击事件里面跳转设置this的时候,我们都会写上类名,类似:Intent intent =new Intent(MainActivity.this,TestActivity.class); 。
13:事件拦截:在Android里面会有很多事件拦截处理;小程序里面也不例外。看如下小程序布局:
如上我给子父view都设置了bindtap点击事件,这个时候点击下去会发现两个事件都执行了,这在小程序里面称为事件冒泡;要想image被点击,view不被点击则得使用catchtap 属性;修改如下:
总结了网上的一些资料,希望对大家有帮助!