微信小程序 + wepy快速开发

wepy官网：https://tencent.github.io/wepy/document.html，想要了解全面最好去官网，以下只是指出项目里常用地方。

1.页面跳转

(1)//有返回跳转
wepy.navigateTo({
url: "/pages/address_add"
});

(2)//无返回跳转
wepy.switchTab({
url: '/pages/shop_cart'
})

2.组件间通信

(1)由一个页面或组件对另一个组件中的方法的直接调用

this.$invoke('comAddress', 'getLocationInfo');  //第一个参数是调用指定组件的路径，第二个是调用的方法。

(2)由子组件发起向父组件调用某方法，如从组件comC发起，comB组件接收，然后page_A在接收

that.$emit('selectCode', that.code);  //第一个参数是调用的方法，第二个是传过去的参数

(3)事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。如从page_A发起，comB组件接收，comB里的组件comC再接收

this.$broadcast()

3.数据 / 缓存
wepy.$store.dispatch({type: CHANGE_CART, payload: {goodCartList: that.cartList}});

4.页面与组件

首先组件最好放在 components 里，调用的方法和微信一样。然后页面也是和原生的微信小程序一样，最好是放在 pages包 里，然后在 app.wpy 创建一个页面，不过wepy没有和微信小程序一样有 .js，.json，.wxml，.wxss文件，它是把这四个文件结合在一个后面带有 .wpy 文件里，结构和区别如下：

(1) 页面

<template>
　　<view>
　　　　<topicItem :countNum.sync="countNum" @showDownload.user="getShowDownload"></topicItem>  //使用组件，countNum 为传入组件参数，加个 .sync 属于动态传值，否者属于静态传值，只能传String类型。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　@showDownload.user 为子组件调用父页面的方法，.user表明绑定用户自定义组件事件，通过$emit触发
　　　　<view @tap="previewImage"></view>　　//区别：这里的事件不像原生小程序那样用要 bindtap=''，这里用 @tap=''，可以用 @tap.stop='' 阻止事件冒泡
　　</view>
</template>

<script>

import wepy from 'wepy';
import api from "@/api/api"; //调用后台接口统一放在这文件里
import TopicItem from "../../components/topic_item"; //导入组件

export default class SquareDetails extends wepy.page { //注意：这里是 page

config = {
    navigationBarTitleText: '话题详情', //设置页面标题
    usingComponents: {
        "van-popup": "/components/vant-weapp/popup/index",  //这是导入vant组件
    }
};

components = {
    topicItem: TopicItem, //左边是 template 里调用组件的名字，右边是 script 导入组件的名字,两边可以不一样
};

data = {
　　countNum:[]
}

onLoad(option) { //生命周期和上拉下拉加载和微信的一样
　this.topicDetails();
}

async topicDetails() {  //区别：调用后台接口的方法可以使用 async 表示异步请求，然后使用 await 等待接口返回数据
　　const json = await api.getTopicDetails(
　　　　query: {
　　　　　　id: xxxxx    
　　　　}
　　}

　　if (json.data.code == "SUCCESS") {
　　　　//接口返回后的操作逻辑　　　　
　　　　let resData = json.data.data;
　　　　this.countNum = resData;  //区别：这里不用像小程序那样要用 this.setData({xx:'aa'}) 赋值。只需要用 ‘=’ 号就可以了
　　　　this.$aplly();　//区别： 这里要调用　$apply() 才能把最新数据渲染到页面，不然页面显示的还是原来的值
　　}
)

methods = {  //区别：页面或组件的方法和点击事件最好要写这里
　　previewImage(){
　　　　//操作逻辑
　　},
　　getShowDownload(a,b,c){ //这是子组件用 this.#emit('showDownload',a,b,c) 传过来的方法, a,b,c 是传过来的参数 
　　　　//操作逻辑
　　}
}

}
</script>

<style lang="less">

.topic-item-container {
　　//css
}

</style>

(2) 组件

<template>
　　<block wx:for="{{countNum}}" wx:for-index="index" wx:for-item="item" wx:key="index">　　
　　　　<view>{{item}}</view>
　　</block>
</template>

<script>

import wepy from 'wepy';
import {UPDATE_TOPIC} from "@/store/types";

export default class SquareDetails extends wepy.component { //注意：这里是 component
config = {
　　usingComponents: {
　　　　"van-field": "/components/vant-weapp/field/index" //调用 vant 组件
　　}
};

props = {  //注意：这里组件用 props 接收父组件传过来的参数
　　countNum:{
　　　　type: Object,
　　　　default: [],
　　　　twoWay: true  //注意：这里 twoWay 标识双向绑定，意思是当子组件的值改变时，父组件对应的值也随之改变
　　}
}

computed = {  //这里可以使用 computed/watch 监听数据变化
    tempTopicItemList() {
        return wepy.$store.getState().topic.topicItemList;
    },
}

updateIndexListStore() {
　　//逻辑操作

　　wepy.$store.dispatch({ //改变 store 里的值
　　　　type: UPDATE_TOPIC, payload: {
　　　　　　topicItemList: newTempTopicItemList
　　　　}
　　});
}

}
</script>
<style lang='less'>
　　// css
</style>

(3) reducers   //可以说是相当于微信小程序的 storageSync 吧

import {handleActions} from 'redux-actions';
import {CHANGE_TOPIC, UPDATE_TOPIC} from "../types";

const defaultState = {
  topicItemList: []
};

export default handleActions({
  [CHANGE_TOPIC](state, action) {
    return {
      ...state,
      topicItemList: action.payload.topicItemList
    };
  },
  [UPDATE_TOPIC](state, action) {
    return {
      ...state,
      topicItemList: action.payload.topicItemList
    };
  },
}, defaultState);