微信小程序实战
为了积攒粉丝，公司决定做一个一分钱姓名测算的小程序引导大家关注公众号。
实现的需求就是
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没有用上，这次就算是入门吧（如有错误，欢迎指教），希望跟大家一起继续学习，以后有机会可以尝试功能更复杂的小程序~~
版权声明：本文为xuniannian原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。