一、 数据绑定 WXML 中的动态数据均来自对应 Page 的 data。
1.简单绑定：双大括号包裹变量,
内容 <view>{{ message }}</view>
Page({
data: { message:'Hello MINA!'}
})
数据双向绑定更新UI，在请求到数据后，更新到**.js 中data里；如上面的data中message：
修改message中的值：
将event的数据写到message中，此时将自动更新到界面显示出来
组件属性&控制属性&关键字
2.运算 可以在 {{}} 内进行简单的运算
三元运算
双大括号中的三元运算
算数运算
<view>{{ 1 + 3}}</view>
逻辑判断
字符串运算
<view>{{ "asdf" + "qweqw"}}</view>
2. 页面跳转（页面路由 最好由不要打乱，由sdk中的栈来维护）
a).wx.navigateTo 打开新页面
wx.navigateTo({
uri:'page路径 路径后面可以拼接参数 e.g: ../test/test?id=1&page=2'，
success：function(){},
fail: function(){},
complete: function(){}
})
b).wx.redirectTo 页面重定向，关闭当前页面，跳转到非tabBar的某个页面
c).使用Navigator组件点击跳转d).wx.switchTabwx.switchTab({ url:'../test/test',})
3. 页面数据
**page.js 中存储页面数据，
在页面中存储
页面中存储数据
页面跳转数据传递 PageA 跳转到 PageB
PageA：
传递数据：?paramName='adfa'
PageB:
PageB中onLoad 获取参数
全局数据存储 以键值对的方式（key -- value）
wx.setStorage, wx.getStorage
wx.setStorageSync, wx.getStorageSync
wx.setStorageInfo, wx.getStroageInfo
wx.setStorageInfoSync, wx.getStorageInfoSync
wx.removeStorage， wx.removeStorageSync
wx.clearStorage, wx.clearStorageSync
布局文件传递数据到js文件：
布局文件中
点击事件中，获取布局文件中配置的参数
4.首页TabBar
首页tabBar设置（app.json）
如上代码截图，workspace 页面必须在Page声明中放在第一的位置，否则将无法显示tabBar
5. 布局（flex）
布局文件
排版样式文件
呈现效果
6. 修改头部颜色 和 文字
在onLoad中调用
wx.setNavigationBarTitle({
title:"title info", // 标题文字
});
wx.setNavigationBarColor({
frontColor:'#ffffff', // 文字颜色
backgroundColor:"#1e77eb", // 背景颜色
});
7. 组件 参考文档
https://developers.weixin.qq.com/miniprogram/dev/component/
8. 分享 后的提示 “已转发” 文案暂时无法修改
9. 数据保存 传递（Page之间，全局等）
全局读写 读写存储器上的数据 setStorage/getStorage; setStorageSync/getStorageSync;
全局读写 存储在App.js中,通过获取App对象来读写；
读： var code = getApp().param;
写：getApp().param = code;
10. 非数据绑定的更新界面 & 动态添加节点 & 动态修改样式等
View的动态添加效果实现 的 取巧方式：View一直存在，只是通过控制其显示和隐藏来实现视觉上的动态添加删除方法。暂无append方法来实现真正意义上的动态添加。
条件渲染来实现隐藏显示示例：
isShow定义在Data中
修改组件样式 只能通过数据绑定来实现，无法通过DOM来操作组件(元素)
e.g. 定义两个样式（wxss）中，wxml布局中做有判断条件：
serviceSelection响应中修改isChecked的值，方式参考 1 ；is_checked 和 normal分别为两种样式
后续持续修改更新中
网友评论