微信小程序实战

为了积攒粉丝，公司决定做一个一分钱姓名测算的小程序引导大家关注公众号。

实现的需求就是 

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没有用上，这次就算是入门吧（如有错误，欢迎指教），希望跟大家一起继续学习，以后有机会可以尝试功能更复杂的小程序~~