学习时做的总结,具体的知识点请到官网去看。
下面是自动生成的page例子,感叹号后面的文字是我新添加的注释
Page({ /** * 页面的初始数据 */ data: { // !数据绑定如果是在属性中应该加上双引号 // !小程序只是单向绑定 }, /** * 生命周期函数--监听页面加载,!第一个运行 */ onLoad: function (options) { // !从服务器获取数据,用this.setData(变量)放在data中去 }, /** * 生命周期函数--监听页面初次渲染完成,!第三个运行 */ onReady: function () { }, /** * 生命周期函数--监听页面显示,!第二个运行 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
注意点:
1. 小程序组件的属性值会被转换成布尔值,所以只要里面有值,得到的就会是true,如果一定要表示false,可以这样子写"{{false}}"
2. 小程序只是单向绑定
3. 数据绑定如果是在属性中应该加上双引号,如:src="{{img_src}}"
4. 在函数中利用this.setData()方法把变量放到data中去时,要注意他是直接把变量的内容放到data中去,也就是会丢失变量名,如果想变量名也传递过去,可以直接传递一个对象:this.setData({key:name})
表示变量名为key,变量内容为name。
5. wx.navigateTo({})是进入子页面,会有返回按钮,运行onHide函数,wx.redirectTo({})是进入主页面,不会有返回按钮,运行onUnload函数,{}表示接收的是对象。注意:小程序页面最多只有五级
6. 小程序绝大部分事件是冒泡事件,要区分bind和catch事件区别,如果是bind就会多个事件由里到外触发,如果是catch,就只会触发最里面的事件,也就是当前最先看到的组件的事件
7. alt+shift+f格式化代码
8. 建立一个js文件单独存放数据,作为本地数据库模拟服务器使用,但记得要在文件中定义一个出口module.exports={取一个变量名:变量内容,第二个变量名:变量内容}
,使变量输出到别的脚本文件中去。然后,在别的脚本中var getData=require('相对路径.js')
9. 小程序只实现了模板化技术,并没有实现模块化的技术,所以js是没有用的。直接在需要用的html页面<import src="路径.wxml/>"
并在需要用到模板的地方写<template is="模板名" data="需要传的数据/>
而在css中@import "相对路径.css";
附加一个小技巧:在变量名前面加三个小点,可以把对象平铺开,成为多个变量,就不用以对象名点的形式访问了
10. 小程序的提示错误还不够完善,标签如果写差一个斜杠,js文件如为空等都会导致页面显示不正常,但是却不报错,这个需要注意
11. 可以给组件添加自定义属性,但是必须要以data开头,以-连接,在js中even.currentTarget.dataset.属性;就可以获取到属性,currentTarget是指鼠标当前的对象