[b]实现的需求就是 [/b]
1 首页 用户编辑姓名和性别进行提交
2 测算结果页 实现分享和支付功能
3 测算历史页面 看到用户曾经测算记录
4 分享的过程和实现
首先，微信小程序单位可以采用rpx,布局可以采用flex布局
row :从左到右的水平方向为主轴
[list=1]
[*]<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>
[/list]
[i]复制代码[/i]
基本上会html.css的实现页面都不成问题，下面就说下具体在做的时候遇到了哪些问题？
[b]1.自定义toast，微信小程序有自带的toast组件[/b]
[list=1]
[*]<toast hidden="{{hiddenToast}}" duration="3000" bindchange="toastHidden" >OK!</toast>
[/list]
[i]复制代码[/i]
上面的图标是去不掉的，样式也不够灵活，所以我们就自己写了一个公用的toast页面，之后在需要用到的页面直接引用即可。
附代码：
wxml
[list=1]
[*]<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();
[*]
[*]}
[/list]
[i]复制代码[/i]
[b]2.页面内转发open-type="share"低版本不兼容（兼容版，不支持的手机自动不显示这个button按钮）[/b]
[list=1]
[*]<button wx:if="{{canIUse}}" class="cs-btn shareBtn" open-type="share">分享给好友</button>
[*]<share-button wx:else></share-button>
[/list]
[i]复制代码[/i]
[b]3.有数据的页面转发，转发时说页面不存在，因为转发时要带上参数[/b]
[list=1]
[*]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'
[*] }
[*] }
[*]
[/list]
[i]复制代码[/i]
}
[b]4.返回顶部效果（页面整体加个页面监听）[/b]
[list=1]
[*]<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
[*] });
[*] }
[*]}
[/list]
[i]复制代码[/i]
[b]5.页面生成订单，要重新进入小程序才可以看到？（这是因为你只在onLoad里加载了数据，并没有在onShow里面渲染数据）
6.判断接口某个字段有没有数据，要用length判断，data.item.length>0
7.load效果，当没有数据时出现load状态，有数据时load消失？[/b]
[list=1]
[*]<image class="load" wx:if="{{load}}" src="/image/load.gif"></image>
[/list]
[i]复制代码[/i]
在onLoad状态里加载loading，load赋值为true,当request请求成功时load赋值为false
|
|
