微信小程序学习笔记

视图层

WXML

数据绑定

• Mustache 语法（双大括号）中变量不存在时不会报错~
• Mustache 语法（双大括号）中字符串运算用+
• Mustache 语法（双大括号）中变量不用加引号，加了会当成字符串
• Mustache 语法（双大括号）中对象写法：object.key或者object[‘key’]
• <checkbox checked="{{false}}"> </checkbox>会解析成false，不要直接写 checked=“false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。

条件渲染和列表渲染

• 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
  意思就是不会在页面中渲染出来。例子如下：

  <block wx:if="{{true}}">
    <view> view1 </view>
    <view> view2 </view>
  </block>

模板

• 模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 模块。
  这个data是指：<template is="msgItem" data="{{...item,ceshi}}"/>这里面的这个data，而不是js文件中的data

WXSS

样式导入

• page.wxml 默认会引入page.wxss，即：page.wxss不需要手动导入。

事件

事件是视图层到逻辑层的通讯方式。

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

乐购商城项目心得

JSON

• 打开非tabBar页面时，底部的tabBar栏会消失~
  

WXML

• 如图，每个页面的最外层经渲染后，是有page标签包裹的
  
• swiper 滑块视图容器，要特别关注的是current属性，默认值为0，显示第一个轮播图，为1时显示第二个轮播图。依据此可以实现如下详情和售后点击出现轮播效果。
  
• navigator 导航组件，相当于HTML里的a标签

JS

• 动态修改视图层数据： setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。而this.data.num=88;只是同步修改对应的 this.data 的值。 例子如下所示：
  page.wxml:

<view>{{ num }}</view>
<text  bindtap='bindMinus'>-</text>

page.js:

page({
data:{
num:666}
})
bindMinus:function(){

this.setData({
num:777})
}

• 获取当前js页面data中的参数test：this.data.test
• wx.switchTab(Object object)，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，例如：
  wx.switchTab({ url: '/pages/index/index', })
• wx.navigateTo(Object object) 保留当前页面，跳转到应用内的某个页面。会在跳转后的页面生成一个如下的返回键。但是不能跳转到tabtar页面~
  
• this是指向当前的对象，随着上下文作用域的切换this的执行this的指向会发生改变，我们可以先保存一份this的值然后再使用：

test: function() { 
var that = this
}

• 小程序传参：如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。需要特别关注的是，currentTarget属性和target属性的dataset属性。dataset：事件（源）组件上由data-开头的自定义属性组成的集合。
  还有一个是detail属性：自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。例如：

<input type='text' bindchange='bindmanual' value='{{ num }}'></input>

 // 手动输入购买量
   bindmanual: function(e) {
      var num = e.detail.value;
      this.setData({
         num: num
      });
   },

• 在page.js中申明的变量（函数外），好像是全局变量。因为在函数中不需要传进去也可以直接使用。
• app.js里，globalData为全局变量，使用方法：
  app.js:

globalData: {
    userInfo: null,
    test:666
  }

page.js:

const app = getApp()
...
  onLoad: function() {
      console.log(app.globalData.test)
      }
...

• onload函数里参数是上个页面传递过来的参数：

 /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function(options) {
      this.loadGoodlist(options.cid)

   },

遇到的一些问题

1. 昵称是含有特殊符号或者是表情图片，存入到mysql数据库出错
   解决：存入时：base64_encode()
   取出时：base64_decode()
2. 发现tabar页面首次加载后，再打开别的页面，再重新进入到这个tabtar页面，不会重新加载onload()；而onshow()则是每次打开页面都会重新加载。说的不是很准确，具体参考文档：
   参考：页面路由|微信开放文档