使用wepy前
请先过一遍小程序官方文档：https://developers./miniprogram/dev/index.html?t=19040122
当然要先会一些vue，以及redux的基础：
vue官方文档：/v2/guide/
redux中文文档：.cn/
其次wepy安装请自行查看文档：https://tencent.github.io/wepy/document.html#/./doc.cli
接着请学习（大佬请跳过，以下为个人认为比较好的教程~）
1.promise：
参考资料：
ES6 Promise 用法讲解
视频教学：
【ES6-Promise】新的异步解决方案 脱离回调噩梦
2.async,await:
参考资料：
理解 JavaScript 的 async/await
视频教学：
async & await 【陈潇冰】
【ES7】async - await 可能是目前异步最好的解决方案吧
注意：wepy项目中使用Promise
npm install wepy-async-function --save
import 'wepy-async-function';
进入项目根目录，安装polyfill在app.wpy中引入polyfill在app.wpy中使API promise化
export default class extends wepy.app {constructor () {super();this.use('promisify');}}我目前的项目处理异步请求是这样的。
async onLoad() {let show = await wepy.login();if (show.errMsg == 'login:ok') {this.code = show.code;this.$apply();}}在wepy中去除了setData这个方法，其次this.$apply()是一种脏检查，异步更新数据，手动刷新dom的时候必须使用。
关于页面API的封装
新建一个wxRequest.js
//wxRequest.jsimport wepy from 'wepy'const wxReq = async(parmas, url) => {let res = await wepy.request({url: url, //开发者服务器接口地址",data: parmas.query, //请求的参数",method: parmas.method || 'GET',header: { 'Content-Type': 'application/json' }});return res}module.exports = {wxReq}
封装所有的请求 api.js
//api.jsimport { wxReq } from '@utils/wxReq';const baseUrl = '';const getUserInfo = (pramas) => wxReq(pramas, baseUrl+ 'v2/getrUserInfo');export default {getUserInfo}
在pages中使用：
import api from '@somepath/api'async getUserInfo(){let res = await api.getUserInfo({query: {code: '123',id: 12},method: 'POST'})})}
语法注意
虽说wepy语法接近vue.js，但是还是有一些差异的，下面稍微提一下我使用的时候踩到的坑~
template
<view class="show-box contorl-detail" wx:if="{{ hasLength }}"><view class="head-img-box"><repeat for="{{array}}" key="index" index="index" item="item"><view class="head-img"><image src="{{ imgLeftSrc }}" mode="scaleToFill" lazy-load="false"></image><view class="arrow"></view><view class="left-content">{{ item.leftText }}</view></view></repeat></view></view>
script
data = {hasLength: false,code: null,leftText: '',imgLeftSrc: '',model: '聊天昵称',leftOrRight: 'left',array: [],items: [{ name: 'left', value: '左边聊天' },{ name: 'right', value: '右方聊天' }]}
template中 ：wx:if="{{ hasLength }}" 请注意=号后的属性值调用的是data中的数据，必须加上双花括号,这一点更像原生小程序的语法。
相比于wx:for而言，使用repeat标签我认为更好一些，把需要循环的所有内容直接放在repeat中，可以避免wx:if和wx:for的冲突，
当然在vue中套一层template，也没多大影响~
在wepy中，假设你要遍历的是子组件，那么此时就必须使用repeat。
官方栗子：
/**project└── src├── components| └── child.wpy├── pages| ├── index.wpy index 页面配置、结构、样式、逻辑| └── log.wpylog 页面配置、结构、样式、逻辑└──app.wpy 小程序配置项（全局样式配置、声明钩子等）**/// index.wpy<template><!-- 注意，使用for属性，而不是使用wx:for属性 --><repeat for="{{list}}" key="index" index="index" item="item"><!-- 插入<script>脚本部分所声明的child组件，同时传入item --><child :item="item"></child></repeat></template><script>import wepy from 'wepy';// 引入child组件文件import Child from '../components/child';export default class Index extends wepy.page {components = {// 声明页面中要使用到的Child组件的ID为childchild: Child}data = {list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]}}</script>
script中，在vue中，方法是全部写在methods中..
注意，对于WePY中的methods属性，因为与Vue中的使用习惯不一致，非常容易造成误解，这里需要特别强调一下：WePY中的methods属性只能声明页面wxml标签的bind、catch事件，不能声明自定义方法，这与Vue中的用法是不一致的。 一般的方法是这样的
methods = {MethodsOne() {},MethodsTwo() {},MethodsThree() {},}
如果按照上方的配置，对于异步的方法可以考虑和自定义方法一起直接写在导出的对象中，和methods可以同级
例如：
async MethodsOne() {let res = await function ajax(){}}async MethodsTwo() {let res = await function fetch(){}}async MethodsThree() {let res = await function request(){}}myEvent() {console.log('我是自定义事件')}methods = {MethodsOne() {},MethodsTwo() {},MethodsThree() {},}
时间不是很多，我也比较懒，所以暂时写到这里，以上有任何错误，欢迎留言指出~
贴一张前端微信的交流群，群内有超级大佬噢~
失效了请加我wx：JJvae1
