為了積攢粉絲，公司決定做一個一分錢姓名測算的小程序引導大家關注公眾號。
實現的需求就是
1 首頁 用戶編輯姓名和性別進行提交
2 測算結果頁 實現分享和支付功能
3 測算歷史頁面 看到用戶曾經測算記錄
4 分享的過程和實現
首先，微信小程序單位可以采用rpx,布局可以采用flex布局
row :從左到右的水平方向為主軸
<view >
<view class="flex-row" style="display: flex;flex-direction: row;">
<view class="flex-view-item">1</view>
<view class="flex-view-item">2</view>
<view class="flex-view-item">3</view>
</view>
column:從上到下的垂直方向為主軸
<view class="flex-column" style="display:flex;flex-direction: column;" >
<view class="flex-view-item">c1</view>
<view class="flex-view-item">c2</view>
<view class="flex-view-item">c3</view>
</view>
</view>
基本上會html.css的實現頁面都不成問題，下面就說下具體在做的時候遇到了哪些問題？
1.自定義toast，微信小程序有自帶的toast組件
<
toast
hidden
=
"{{hiddenToast}}"
duration
=
"3000"
bindchange
=
"toastHidden"
>OK!</
toast
>
上面的圖標是去不掉的，樣式也不夠靈活，所以我們就自己寫了一個公用的toast頁面，之后在需要用到的頁面直接引用即可。
附代碼：
wxml
<template name="toast">
<view class="toast_content_box" wx:if="{{ isHide }}">
<view class="toast_content">
<view class="toast_content_text">
{{content}}//自定義提示框內容
</view>
</view>
</view>
</template>
js
let _compData = {
'_toast_.isHide': false,// 控制組件顯示隱藏
'_toast_.content': ''// 顯示的內容
}
let toastPannel = {
// toast顯示的方法
show: function(data) {
let self = this;
this.setData({ '_toast_.isHide': true, '_toast_.content': data});
setTimeout(function(){
self.setData({ '_toast_.isHide': false})
},2000)
}
}
function ToastPannel() {
// 拿到當前頁面對象
let pages = getCurrentPages();
let curPage = pages[pages.length - 1];
this.__page = curPage;
Object.assign(curPage, toastPannel);
// 附加到page上，方便訪問
curPage.toastPannel = this;
// 把組件的數據合並到頁面的data對象中
curPage.setData(_compData);
return this;
}
module.exports = {
ToastPannel
}
//頁面引用方法
<import src="../../component/toastTest/toastTest.wxml"/>
<template is="toast" data="{{ ..._toast_ }}"/>
這樣只要在頁面onLoad里調用組件就可以直接渲染文案了
// 調用應用實例的方法獲取全局數據
onLoad: function (options) {
let app = getApp();
// toast組件實例
new app.ToastPannel();
}
2.頁面內轉發open-type="share"低版本不兼容（兼容版，不支持的手機自動不顯示這個button按鈕）
<button wx:if="{{canIUse}}" class="cs-btn shareBtn" open-type="share">分享給好友</button>
<share-button wx:else></share-button>
3.有數據的頁面轉發，轉發時說頁面不存在，因為轉發時要帶上參數
onShareAppMessage: function () {
if (this.data.orderNo){
return {
title: '快來測測你的名字！',//分享的標題
desc: '父母取的名字，真能影響一生？',//分享的文案
path: '/pages/result/result?orderNo=' + this.data.orderNo + '&share=1'//分享的鏈接
}
}else{
return {
title: '快來測測你的名字！',
desc: '父母取的名字，真能影響一生？',
path: '/pages/result/result?strName=' + this.data.username + '&share=1'
}
}
}
4.返回頂部效果（頁面整體加個頁面監聽）
<scroll-view class="bigWrap" scroll-y="true" scroll-top="{{scrollTop}}" bindscroll="scroll" bindscrolltolower= "scrolltolower" style="position: absolute; left: 0; top:0; bottom: 0; right: 0;">
</scroll-view>
//返回頂部效果
goTop: function (e) {
this.setData({
scrollTop: 0
})
},
scroll: function (e, res) {
// 容器滾動時將此時的滾動距離賦值給 this.data.scrollTop
if (e.detail.scrollTop > 500) {//滾動高度超過500時，返回頂部按鈕出現
this.setData({
goTopstatus: true
});
} else {
this.setData({
goTopstatus: false
});
}
}
5.頁面生成訂單，要重新進入小程序才可以看到？（這是因為你只在onLoad里加載了數據，並沒有在onShow里面渲染數據）
6.判斷接口某個字段有沒有數據，要用length判斷，data.item.length>0
7.load效果，當沒有數據時出現load狀態，有數據時load消失？
<image class="load" wx:if="{{load}}" src="/image/load.gif"></image>
在onLoad狀態里加載loading，load賦值為true,當request請求成功時load賦值為false
8.請求接口
Myorder: function () {
var orderNoStr = wx.getStorageSync('orderNoStr');//獲取異步存儲的訂單號
var that = this;
wx.request({
url: app.data.servsers + '?action=wxApi&function=MyOrder&orderNoStr=' + orderNoStr,//orderNoStr是異步存儲的訂單號
header: {
'content-type': 'application/json'
},
success: function (res) {
that.setData({
historyData: res.data.listData //請求的數據放到data里，再渲染至頁面上
});
},
})
},
onLoad:function(options){
this.Myorder();//在頁面加載時請求接口
},
9.如何通過不同的參數訪問不同的頁面？
<navigator wx:if="{{item.pay_status==1}}" url="../result/result?orderNo={{item.orderNo}}">
</navigator>
<navigator wx:else url="../result/result?strName={{item.username}}" >
</navigator>
這里 跳到新頁面之后在onload里面直接接收參數，接收方法也就是 options.[參數值]
orderNo={{item.orderNo}}的參數值就是{{item.orderNo}}
這樣就可以通過不同的url去請求不同的接口，以至於渲染出不同的頁面
10.獲取微信小程序的openid
setOpenId: function (loginCode) {
var that = this;
wx.request({
url: '../GetOpenid',
method: "POST",
data: {
"mid": 'SM',
"code": loginCode.code
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
wx.setStorageSync('openid', res.data.openid);
that.createOrder();
}
})
}
還有一些支付上的邏輯，是要和微信對接的，大部分是開發那邊做的，這就是這次小程序測試時遇到的問題，當然，我們提前上網查看資料，避免了一些坑，隨便寫寫，希望能對接下來要做小程序的同學有所幫助吧~當然，我們的需求比較簡單，很多強大的API沒有用上，這次就算是入門吧（如有錯誤，歡迎指教），希望跟大家一起繼續學習，以后有機會可以嘗試功能更復雜的小程序~~