看著文檔拿做過(guò)的項(xiàng)目的接口實(shí)踐了一下
效果圖：
劃重點(diǎn)：
1.語(yǔ)法
2.提供的組件，自定義組件，模版以及樣式文件
3.界面之間數(shù)據(jù)的傳遞
4.路由
5.后臺(tái)數(shù)據(jù)的獲取
使用中很驚喜的是微信開(kāi)發(fā)者工具在創(chuàng)建項(xiàng)目之后的整個(gè)環(huán)境搭建和視圖的展示都很清晰人性化，整個(gè)自己去體會(huì)了。
1.語(yǔ)法：語(yǔ)法上來(lái)說(shuō)風(fēng)格和vue很像，支持es6，用起來(lái)還算順手。
2.提供的組件主要是<view> <text> <button> <image> 最為常用，用過(guò)react-native的就覺(jué)得眼熟了，但是這里都是小寫(xiě)喲。自己寫(xiě)的模版用<template>包住，<import src="../template/template.wxml"/>的形式引入<template is="name"/>的形式使用，模版里的事件都需要在使用模版的模塊下寫(xiě)好。
組件相對(duì)復(fù)雜，有自己的js，json等全套，引入的時(shí)候需要在寫(xiě)進(jìn)使用模塊的json文件里，寫(xiě)好路徑。以下是官方例子：
使用的時(shí)候
<my-component>
<!-- 這部分內(nèi)容將被放置在組件 <slot> 的位置上 -->
<view>這里是插入到組件slot中的內(nèi)容</view>
</my-component>
<!-- 組件模板 -->
<view class="wrapper">
<view>這里是組件的內(nèi)部節(jié)點(diǎn)</view>
<slot></slot>//<my-component>內(nèi)的內(nèi)容會(huì)在這里面顯示
</view>
樣式就寫(xiě)在對(duì)于名稱的wxss文件中，和css文件寫(xiě)法一致
4.路由：
一般來(lái)說(shuō)，開(kāi)發(fā)者工具在你選擇新建page的時(shí)候，就會(huì)給你自動(dòng)配置好路由，人性化吧。
在最外層的app.json里就多了一些代碼：
如果你自己只加一個(gè)wxml文件又想加入路由就自己在這個(gè)頁(yè)面里加入相對(duì)的位置路徑。
路由跳轉(zhuǎn)：navigateTo
{
"pages": [
"pages/index/index", //這里都是路由喲，在微信里翻譯應(yīng)該叫頁(yè)面？這個(gè)理解就好吧，沒(méi)有正規(guī)答案
"pages/logs/logs",
"pages/too/too",
"example/index",
],
"window": {
"backgroundTextStyle": "dark",//黑色的下啦顯示
"navigationBarBackgroundColor": "#21a",//藍(lán)色的底色
"navigationBarTitleText": "你詩(shī)爺?shù)男〕绦?,
"navigationBarTextStyle": "white",//白色的頂部文字
"enablePullDownRefresh": true//允許下拉，這個(gè)基本用得到的。
}
}
wx.navigateTo({
url: '../too/too',
})
配置文檔：
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE
為了看的清晰，我用了顏色分明的做例子，效果：
5.很重要的一點(diǎn)，數(shù)據(jù)的獲?。?br> 首先：
接口沒(méi)有通過(guò)微信是不能用的，我們不是正式上線就把這個(gè)勾掉進(jìn)行數(shù)據(jù)獲取，這里還有一個(gè)驚喜的地方，就是竟然沒(méi)有跨域問(wèn)題，vue和react都是要進(jìn)行跨域操作的。（不知道是不是之前用過(guò)這個(gè)接口nginx已經(jīng)代理了，這個(gè)沒(méi)有來(lái)得及去驗(yàn)證）
然后在外層的app.js 里的globalData中寫(xiě)下你的接口通用地址：
再然后：我這里寫(xiě)了兩個(gè)接口作作為實(shí)踐，第一個(gè)是登錄，第二個(gè)是獲取一個(gè)裝車單列表。
登錄寫(xiě)在進(jìn)入后的第一個(gè)頁(yè)面組合的onLoad中。
wx.request({
url: app.globalData.api + '/auth/auth/login', //接口詳細(xì)地址
data: {
password: '123456',//發(fā)送的數(shù)據(jù)
login: '199199199199'
},
header: {
'content-type': 'application/json' // 默認(rèn)值
},
method: 'POST',//類型
success: (res) => {
console.log(res.data.result)//得到數(shù)據(jù)
app.globalData.info = res.data.result || {}
this.setData({
info: res.data.result || {}, //成功之后保存在globalData和這個(gè)頁(yè)面的data中，globalData不直接在頁(yè)面中使用，負(fù)值給本頁(yè)面的data來(lái)使用全局?jǐn)?shù)據(jù)。
})
}
//還可以寫(xiě)一個(gè)error 。
})
裝車單頁(yè)面數(shù)據(jù)獲取：
知識(shí)點(diǎn)：循環(huán)數(shù)據(jù)，回到頂部，下拉刷新，上拉加載。
// pages/too/too.js
const app = getApp()
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
},
info: {},
top: 0,
dataItems: [],
has_next: false,
parmas: {
offset: 0,
}
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
console.log(this.data.parmas)
if (app.globalData.info) {
this.setData({
info: app.globalData.info,
})
this.getItem()
}
},
getItem: function(type) {
wx.request({
url: app.globalData.api + '/tms/delivery/search',
data: this.data.parmas,
header: {
'content-type': 'application/json',
'token': app.globalData.info.token,
},
method: 'GET',
success: (res) => {
type === 'up' ? wx.stopPullDownRefresh() : null
console.log(res.data)
this.setData({
dataItems: this.data.parmas.offset === 0 ? res.data.result && res.data.result.items
: [
...this.data.dataItems,
...res.data.result && res.data.result.items
],
has_next: res.data.result && res.data.result.has_next || false,
})
}
})
},
tapMove: function() {
this.setData({
parmas: {
offset: 0
}
},() => {
wx.pageScrollTo({
scrollTop: 0, //回到頂部
duration: 500, //過(guò)程耗時(shí)
})
wx.startPullDownRefresh()
})
},
down: function() {
if (this.data.has_next) {
this.setData({
parmas: {
offset: this.data.parmas.offset + 20
}
}, () => {
this.getItem()
})
}
console.log('down')
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
console.log('--->up')
this.getItem('up')
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
console.log('---->down')
this.down()
},
})
這里我把數(shù)據(jù)獲取寫(xiě)在了一個(gè)函數(shù)之中，方便頁(yè)面刷新時(shí)公用。還有數(shù)據(jù)的處理，我相信有代碼經(jīng)驗(yàn)的人都是看得懂的。
這里微信提供了很多api，下拉刷新，上拉加載都很方便，個(gè)人覺(jué)得比提供的<scroll-view>好用。
裝車單頁(yè)面：
<!--pages/too/too.wxml-->
<view class='box'>
<view wx:for="{{dataItems}}" class='orders-box' wx:for-item="i" wx:key="{{i.id}}" >
<text style='font-size: 16px; color: blue'>{{i.serial_no}}</text>
<view class='orders'>
<view wx:for="{{i.order_list}}" wx:for-item="j" wx:key="{{j.id}}" class='order-item'>
<text>{{j.order_code}}</text>
</view>
</view>
</view>
<button size="mini" class='to-top' bindtap="tapMove">回到頂部</button>
</view>
一個(gè)小程序出爐了，記錄以下我的第一個(gè)小程序?qū)嵺`。
還有一個(gè)關(guān)于圖片上傳的問(wèn)題，微信會(huì)把你需要上傳的圖片托管在自己的平臺(tái)給你一個(gè)臨時(shí)地址。我只得到這個(gè)臨時(shí)地址，當(dāng)下就可以使用在小程序中，沒(méi)有提供base64，這個(gè)需要后臺(tái)拿這個(gè)臨時(shí)地址于微信交互獲取更需要的信息。這個(gè)是目前唯一覺(jué)得不是很理想的地方，如果提供不同的方式，可以臨時(shí)也可以選擇base64就好啦。總的來(lái)說(shuō)，微信提供的拍照和上傳，提示等等的api使得開(kāi)發(fā)很方便呢。
我看到有人把數(shù)據(jù)獲取包裝了，可我倒是覺(jué)得這樣的獲取已經(jīng)很簡(jiǎn)便了，公共的一些配置都放在全局里調(diào)用也夠用了。話說(shuō)我在react項(xiàng)目中使用一個(gè)寫(xiě)好的action也幾近那么多行代碼了。
