微信小程序
1.微信小程序，简称小程序，是一种不需要下载安装即可使用的应用，用户扫一扫或搜一下即可打开应用。
2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。
2.开发小程序所工具：微信开发者工具
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.搭建小程序开发环境
第一步：注册一个小程序帐号
注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
appid：设置-开发者设置
如何配置ajax请求的域名：设置-开发者设置-服务器域名-开始配置-扫码配置request域名，用于调用ajax的接口地址
第二步：下载开发者工具
第三步：进行开发
小程序开发目录结构：
pages:工作目录 相当于vue脚手架中的src目录
.json 页面级的配置文件，若没有设置，会使用app.json中的配置
.wxml 即页面模板结构，WXML相当于html
常用标签：
view:相当于普通html中的div标签
text:相当于普通html中的span标签
button
.wxss 即页面样式 相当于css 单位：rpx 相当于rem
.js 即页面JS逻辑
untils:常用工具方法
app.js:小程序的入口js 相当于vue中的main.js
app.json:小程序的全局配置文件
app.wxss: 小程序全局样式（通常存放一些能用的样式），相当于reset.css wxss相当于css
4.小程序如何绑定事件及传参
（1）绑定事件语法： <标签 bind事件名="要执行的方法名">点击</标签>
例如：bindtap:相当于click
例如： <button bindtap="go">点击</button>
（2）传参：小程序传参是通过添加自定义属性的形式
第一步：在标签上添加data-属性名
<button bindtap="go" data-id="1001" data-name="1603A">点击</button>
第二步：通过绑定的事件中的参数来接收自定义属性
e.currentTarget.dataset
例如：
go(e) {
var id=e.currentTarget.dataset.id
// var name=e.currentTarget.dataset.name
}
4.添加tabBar和新页面
(1)添加tabBar:
需要在app.json中添加barBar选项
例如：
{
"pages":[....],
"window":{.....},
"tabBar":{
"list":[
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"imgs/home.png",
"selectedIconPath":"imgs/home_active.png"
},
{
"pagePath":"pages/logs/logs",
"text":"日志",
"iconPath":"imgs/log.png",
"selectedIconPath":"imgs/log_active.png"
}
]
}
}
(2)添加新页面
第一种:手动添加页面，同时也要在app.json中添加对应文件的路径
第二种：通过微信开发者工具添加页面
先建目录->再新建 page
5.渲染数据:用wx:for 来遍历数据
例如：
<view class="list">
<view wx:for="{{ arrs }}"
wx:for-index="指定一个下标名"
wx:for-item="指定要遍历的项">
wx:key="*this"
{{ i+1 }}-{{ ite }}
</view>
</view>
注：
wx:for-index默认是index
wx:for-item 默认的是item
注意： 为了提高遍历的渲染性能，通常要在遍历项添加一个wx:key属性
6.判断
wx:if="逻辑值" 条件为真创建出来，条件为假则删除此元素 相当于v-if
hidden="逻辑值" 条件为真则隐藏,条件为假则显示 相当于! v-show
适用场景：
如果需要频繁切换的情景下，用 hidden 更好
如果在运行时条件不大可能改变则 wx:if 较好。
7.跳转页面及传参
1）页面跳转方式
第一种：标签方式
小程序：<navigator url="要跳转的路径">
vue：<router-link to="" tag="li">
第二种：js方式
小程序：wx.navigateTo({url:"")
例如：
wx.navigateTo({
url:'/pages/canzhuo/canzhuo'
})
类似于 vue:this.$route.push()
2）页面传参（例如：A页面跳转到B页面）
第一步：在A页面通过给标签绑定自定义属性，通过事件处理函数传递参数
<button bindtap="add" data-typeid="1003">去餐桌页面</button>
第二步：在A页面的JS逻辑中，添加第一步中绑定的函数 例如：add
例如：
add(e) {
let typeid = e.currentTarget.dataset.typeid;
wx.navigateTo({
url:'/pages/canzhuo/canzhuo?id='+typeid
})
}
第三步：如何在B页面中接收A页面传递过来的参数
通过onLoad生命周期钩子来监听A页面传递过来的参数
例如:
onLoad: function (options) {
//通过setData同步数据到视图上
this.setData({
id:options.id
});
}
8.如何将js更新的数据同步到视图上
this.setData({
变量：值
});
例如：
this.setData({
id:options.id
});
9.小程序的ajax
- mpvue,wepy
