微信小程序
1.微信小程序孔祸，簡稱小程序屏富，是一種不需要下載安裝即可使用的應(yīng)用脂男，用戶掃一掃或搜一下即可打開應(yīng)用恐锦。
2017年1月9日，張小龍在2017微信公開課Pro上發(fā)布的小程序正式上線疆液。
2.開發(fā)小程序所工具：微信開發(fā)者工具
下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.搭建小程序開發(fā)環(huán)境
第一步：注冊一個小程序帳號
注冊地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
appid：設(shè)置-開發(fā)者設(shè)置
如何配置ajax請求的域名：設(shè)置-開發(fā)者設(shè)置-服務(wù)器域名-開始配置-掃碼配置request域名一铅，用于調(diào)用ajax的接口地址
第二步：下載開發(fā)者工具
第三步：進行開發(fā)
小程序開發(fā)目錄結(jié)構(gòu)：
pages:工作目錄 相當于vue腳手架中的src目錄
.json 頁面級的配置文件，若沒有設(shè)置堕油，會使用app.json中的配置
.wxml 即頁面模板結(jié)構(gòu)潘飘，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事件名="要執(zhí)行的方法名">點擊</標簽>
例如：bindtap:相當于click
例如： <button bindtap="go">點擊</button>
（2）傳參：小程序傳參是通過添加自定義屬性的形式
第一步：在標簽上添加data-屬性名
<button bindtap="go" data-id="1001" data-name="1603A">點擊</button>
第二步：通過綁定的事件中的參數(shù)來接收自定義屬性
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中添加對應(yīng)文件的路徑
第二種：通過微信開發(fā)者工具添加頁面
先建目錄->再新建 page
5.渲染數(shù)據(jù):用wx:for 來遍歷數(shù)據(jù)
例如：
<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="邏輯值" 條件為真創(chuàng)建出來，條件為假則刪除此元素 相當于v-if
hidden="邏輯值" 條件為真則隱藏,條件為假則顯示 相當于! v-show
適用場景：
如果需要頻繁切換的情景下眶明，用 hidden 更好
如果在運行時條件不大可能改變則 wx:if 較好艰毒。
7.跳轉(zhuǎn)頁面及傳參
1）頁面跳轉(zhuǎn)方式
第一種：標簽方式
小程序：<navigator url="要跳轉(zhuǎn)的路徑">
vue：<router-link to="" tag="li">
第二種：js方式
小程序：wx.navigateTo({url:"")
例如：
wx.navigateTo({
url:'/pages/canzhuo/canzhuo'
})
類似于 vue:this.$route.push()
2）頁面?zhèn)鲄ⅲɡ纾篈頁面跳轉(zhuǎn)到B頁面）
第一步：在A頁面通過給標簽綁定自定義屬性，通過事件處理函數(shù)傳遞參數(shù)
<button bindtap="add" data-typeid="1003">去餐桌頁面</button>
第二步：在A頁面的JS邏輯中搜囱，添加第一步中綁定的函數(shù) 例如：add
例如：
add(e) {
let typeid = e.currentTarget.dataset.typeid;
wx.navigateTo({
url:'/pages/canzhuo/canzhuo?id='+typeid
})
}
第三步：如何在B頁面中接收A頁面?zhèn)鬟f過來的參數(shù)
通過onLoad生命周期鉤子來監(jiān)聽A頁面?zhèn)鬟f過來的參數(shù)
例如:
onLoad: function (options) {
//通過setData同步數(shù)據(jù)到視圖上
this.setData({
id:options.id
});
}
8.如何將js更新的數(shù)據(jù)同步到視圖上
this.setData({
變量：值
});
例如：
this.setData({
id:options.id
});
9.小程序的ajax
- mpvue,wepy
