走过小程序的套路，我再也不想重复啦
微信小程序页面传参数
小程序的api文档的写法：
1. json 文件类中颜色类 真机与模拟器 颜色不一致（导航栏背景颜色，芬兰背景颜色）
-》解决方案：使用16进制颜色表示方法（#ffff）
2.变量声明
2个大括号 中间为变量
<view> {{ message }} </view>
Page({ data: { message: 'Hello MINA!' } })
1.关于文件结构
app.xxx,是整体的js css json
app.json.是各个页面
项目的配置文件：
关于页面js里面的结构：
page的页面结构，在page的页面结构里面也可以添加一些函数方法，在page里面再调用，这样
2.关于页面之间参数的传递
页面上的绑定命令是这个： 例如：bindtap="ballClickEvent"
在js上 ballClickEvent: function () {
slideUp.call(this);
},
setData 的解释：
页面上的绑定命令是这个（详细看官网）
方法1：
通过路由的方式传参数：
index.wml页面
<navigator url = "../aaa/aaa?id=1" ></navidator> //传到aaa.wxml的时候传过去的值为id=1，则需要在aaa.wxml 的js获取到id=1
aaa.js页面
Page({
data: {
id:''
},
onLoad: function (options){
var that = this;
that.setData({
id: options.id
})
console.log(that.data.id)
}
})
其他的方法：
https://blog.****.net/yzi_angel/article/details/80568411
一、使用全局变量实现数据传递
购物车界面需要根据是否登录来区别显示，当没有登录时提醒去登录，登录后之间显示自己购物车里的商品列表
全局变量使用方法：
再 app.js 文件中定义全局变量 globalData， 如下：将用户信息存放在 userInfo 中
再如：
//app.js
App({
onLaunch: function () {
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
// 全局变量
globalData: {
userInfo: null
}
})
购物车界面获取全局变量userInfo 的值，判断用户是否登录
onLoad: function (options) {
var app = getApp();
if (app.globalData.userInfo === null){
this.setData({ "haveLogin": false});
}else {
this.setData({ "haveLogin": true});
}
},
二、页面跳转或重定向时，使用url带参数传递数据
使用场景：
点击产品列表中的某一项，跳转到对应的产品详情页面
使用方法：
产品列表中要保证每一项都有个id，点击的时候获取id即可
toSomeone: function (event) {
wx.navigateTo({
url: 'some/some?id=' + event.target.id,
})
}
详情页获取传递来的数据：
onLoad: function (options) {
console.log(options)
},
关于onLoad的函数声明：
*注： 如果传递参数是 json 数据，需要使用JSON.stringify,然后在后台逻辑之中使用JSON.parse序列化成对象使用，而且传递的数据有字节也有限制
三、使用组件模板 template传递参数
使用场景：
我们在排版项目页面的时候，习惯将相同样式的模块拆分成一个模板，在需要用的时候，直接引用模板，这样就可以避免多次排版，同时还方便维护。
使用方法：
不知道怎么使用 template 的同学们， 可以看一下我的上一篇博文（小程序template使用方法），那里详细描述了如何使用template的方法，这里就不在赘述了。
<template is="good" data="{{data}}"></template>
四、使用缓存传递参数
使用场景：
登录成功后将用户信息放入缓存，购物车获取显示用户数据
使用方法：
//缓存数据
wx.setStorage({
key: 'userInfo',
data: res.userInfo
})
1
2
3
4
5
getUsersInfo: function () {
//读取缓存登录
wx.getStorage({
key: 'userInfo',
success: function (res) {
this.userInfo = res.userInfo;
}
})
}
五、使用数据库传递数据
使用场景：
购物车中添加商品之后，直接保存到数据库中，然后购物车界面的产品显示，直接从数据库中获取数据。
使用方法：
//添加商品
addGoods: function (good) {
wx.request({
url: 'your url',
method: 'POST',
header: {
'content-type': 'application/json'
},
data: good,
success: function (res) {
this.setData({ "goodsList": res.data })
}
})
},
//获取数据
getGoodsList: function () {
wx.request({
url: 'your url',
method: 'GET',
success: function (res) {
this.getGoodsList();
}
})
}
六，通过 data -xxxx的形式来写
wxml页面
<button bindtap='clickMe' data-id='1'>点击</button>
如果需要传递多个，可以写多个data-[参数]的方式进行传递
js页面
clickMe:function(e){
var id = e.currentTarget.dataset.id
console.log(id);
},
注意：通过wxml设置data-[参数名]传递参数，[参数名]只能是小写，不能有大写
七：form 的表单传值
小程序的双向绑定和vue哪里不一样？
答：
小程序直接this.data的属性是不可以同步到视图的，必须调用：
this.setData({
noBind:true
})
传参数的方法
给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象
二、设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值
三、在navigator中添加参数传值
、微信小程序与H5的区别？
答：
第一条是运行环境的不同
传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。
第二条是开发成本的不同
只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG
第三条是获取系统级权限的不同
系统级权限都可以和微信小程序无缝衔接
第四条便是应用在生产环境的运行流畅度
长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立
关于 ${}的用法
ES6新特性中的字符串模板允许使用英文字符抑音符号`（提示：这里我们不能将其理解为单引号）来创建字符串，并且在该字符串中可以包含都【美元符号+大括号】包裹的变量
格式：console.log(`ES6新特性：${name}`)
说明：格式中的name为变量名
例子：
Page({
data:{
// text:"这是一个页面"
stringTemplateTxt:''
},
stringTemplate:function(){
var stringTemplateTxt="字符串模板数据"//定义一个变量并初始化值
console.log(`我是${stringTemplateTxt}`)//将stringTemplateTxt变量的值输出到控制台
}
})
后记：这篇文档是看的一些文档自己又整理了一遍。