WePy小程序实践总结干货

如何在page页面,组件以及封装的js复用工具类文件获取app globalData中存储的全局变量以及方法？

page： this.$parent.globalData.applyId
组件：this. $root.$ parent.globalData.applyId
js工具类文件·：wepy.$instance.globalData.tokenId
page使用app中全局的方法：this.$parent.methodName();

关于微信小程序项目路由wx.navigateTo跳转只记录10层的限制，如何更好处理，避免页面卡死？

首先区分微信小程序路由3种常用跳转区别：

wx.navigateTo：微信小程序会自动在nav导航上增加左返回按钮；重要的是，它会保留当前页面，跳转应用中的其他页面**，需要注意：小程序只会帮我们记住10层页面栈！！！超过10层navigateTo跳转便失效！
wx.reLaunch：关闭之前打开的所有页面，然后打开到应用内的某个页面。这个功能可以很好解决navigateTo10层限制问题。
wx.navigateTo：关闭当前页面，跳转到应用内的某个页面。

因此：重要的事情说三遍：在合理的前提下，请尽可能的用wx.redirectTo以及wx.reLaunch代替wx.navigateTo! ...

小程序中原生组件层级最高，页面中的其他元素无论设置多少z-index都无法覆盖在原生组件子上，怎么破？

首先：常见的原生组件有：input(仅在focus时为原生组件)、textarea、map、video、canvas、camera。

解决办法：

官方提供的解决办法：cover-view覆盖原生组件的文本视图和cover-image覆盖原生组件的图片视图，都可以覆盖在原生组件之上。
另外需要注意：由于cover-view和cover-image也是原生组件，需要保证他们插入页面的时机晚于要覆盖的原生组件。否则原生组件还是会覆盖cover-view
若原生组件和自定义元素可以不用同时出现，可以先根据条件干掉原生组件。eg：textarea原生组件的placeholder层级太高，打开的弹窗无法盖住其内容,便可以在打开弹窗的时候，干掉textarea，防止textarea层级穿透。

封装的组件中使用了Vant提供的某些组件，但是当在页面中引入组件后，无法正常显示组件中的某些元素？

解决办法：

请切记 ! 将父组件使用到的Vant组件，例如：van-popup、van-picker等... 乖巧的引入子组件！！！

// 父组件
...
<van-popup show="{{showModel}}" position="bottom" bind:close="modelClose">
    ...
</van-popup>
...

// 子组件
<HomoloInvoice :applyId.sync="applyId"></HomoloInvoice>
export default class PayConfirm extends wepy.page {
    config = {
      navigationStyle: 'custom',
      usingComponents: {
        'van-popup': '../../components/van/popup/index',
        'van-picker': '../../components/van/picker/index',
      }
    };
}

页面page1中引入了组件component1，在页面打开时发现component1onload先于page1onload执行，导致组件无法获取数据源，怎么办？

解决办法：

在组件中使用watch监听页面变化，重新渲染！

watch = {
    // 监听页面中什么时候传入了applyId 参数，再调用接口获取人员数据。
    applyId(val) {
        this.getApplyer(val);
    }
}

使用wx.navigateTo跳转后，返回上一个页面，页面不再进入onLoad生命周期，不会再刷新数据，怎么破？

解决办法：

由于返回上一页，微信小程序只是将隐藏的上一页再次显示出来而已，并不是将上一页重头开始重新渲染，所以可以在onShow生命周期中将需要重新渲染的数据再次执行。注意：防止onLoad和onShow重复加载数据，可以只将需要重新渲染的接口放入onShow生命周期中即可。

使用WePy作为替代原生开发小程序，出现数据源已变化，但是视图无响应，怎么解决？

解决办法：

WePy虽然对原生的setData进行了优化，可以直接使用this.title='name'的形式做数据赋值更新，但是切记：在数据源做了复杂循环变化后...各种数据与视图不同步的情况，请第一时间先手动使用this.$apply()触发脏数据检查，强制更新！基本上就解决了大部分情况！

如何实现微信小程序input的双向绑定那？

解决办法：

input绑定bindinput事件监听输入的值，并且用value值去指定input显示的值。

<input type="text" placeholder="请输入纳税识别号" value="{{identifier}}" bindinput="bindInput" />

bindInput(e) {
    this.identifier = e.detail.value;
},

小程序常用的基础语法易错点：

wx:for循环遍历：双层for循环可能导致，无法区分获取每一层循环的item,可以使用wx:for-item="ele"的形式重置item。

注意写法：wx:for-item：指定数组当前元素的变量名、wx:for-index：可以指定数组当前循环下标索引的变量名

<view wx:for="{{detailLists}}" wx:key="index">
    <view wx:for="{{item.caseMessage}}" wx:key="index" wx:for-item="cases" class="case-list-box">
        <view class="status-blue">{{cases.status}}</view>
    </view>
</view>

踩坑记录：wx:if与wx:for不可在一个元素中同时使用，否则微信不知道是先执行for还是if！会出现渲染逻辑错误！

关于本地缓存的同步设置与获取方式总结

同步设置缓存

// 关于value值：只支持原生类型、Date、及能够通过JSON.stringify序列化的对象  
wx.setStorageSync('VERSION', this.globalData.version);

同步获取缓存

wx.getStorageSync('VERSION');

我想动态修改小程序的页面标题？

wx.setNavigationBarTitle({
    title: that.title
})

关于使用wx.chooseImage选择图片后，如何正确上传图片，并且正确显示那？

在使用wx.chooseImage选择相册图片后，要想显示选择的图片，只能使用<image>标签，不能使用view + background-image，否则图片在开发工具可以正常显示，在真机无法正常显示！
wx.chooseImage选择图片后，api返回的只是选定照片的本地图片文件路径列表，虽然可以直接用<image>标签展示，但是要想正确的保存该图片到自己的服务器后端，还需要调用微信自身的上传方法wx.uploadFile ，将图片上传自己的服务器后台。
wx.uploadFile的filePath参数：暂存图片路径 / url参数：自己服务器后端的请求地址 / 返回值是请求自己后台请求地址后的返回结果

// 1、选择图片
wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'], // 指定是原图还是压缩图
    sourceType: ['album', 'camera'],  // 可以指定来源是相册还是相机
    success(res) {
        // 2、上传图片
        wx.showLoading({ title: '上传中,请稍后...' });
        wx.uploadFile({
            url: `${_that.$parent.globalData.restServiceUrl_csrf}/upload`, // 自己后台的请求地址
            filePath: res.tempFilePaths[0],  // 本地暂存图片路径
            name: 'file',
            method: 'POST',
            header: {
                'content-type': 'multipart/form-data'
            },
            success (res) {
               console.log(res);
                ...
            }
        })
    }
})

关于小程序图片展示有哪几种方式？

直接使用<image>标签展示图片，src属性没有限制，本地图片路径也ok！
使用样式background-img,只能使用在线图片链接，base64，不能使用本地图片链接地址

小程序消息推送如何实现？

需求：在用户未处于小程序界面时，可以通过微信自身的服务消息通知，在小程序外，及时下发通知，提醒用户相关订单最新状态。更多详情参考链接

<form bindsubmit="formSubmit" report-submit>
    <button plain class="form-btn add-case-btn" form-type="submit" @tap="goAddMatters">
        <i class="iconfont icon-addition-fill"></i>
        <text class="btn-text">新增事项</text>
    </button> 
</form>

  // 传递formId给后台
formSubmit(formId, applyId) {
    const param = {
        formId: formId,
        applyId: applyId,
        cancleDate: parseInt(new Date().getTime(), 10) + 604800000,  // 计算7天后的过期时间时间戳
    }
    wxRequest.request(`${this.globalData.restServiceUrl_csrf}/case/saveFormId`, {method: 'POST', data: param})
        .then(res => {
        console.log(res);
    })
}

// 重置form表单内部button样式
.form-btn {
    border:none;
    text-align:left;
    padding:0;
    margin:0;
    line-height:1.5;
}

注意事项：

为了可以给后台提供消息推送所需要的formId，前端应该尽可能多的在项目高频点击处，收集推送码formId。
form中report-submit为true，代表需要请求发模板消息的推送码，此时点击按钮提交表单便可以获取formId，用于发送模板消息。