网站首页 微信小程序正文

微信小程序注意点

学习时做的总结,具体的知识点请到官网去看。

下面是自动生成的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是指鼠标当前的对象

评论列表

yupang
2018-07-09 17:59:41

666

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。