微信小程序 + 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>
//使用组件，countNum 为传入组件参数，加个 .sync 属于动态传值，否者属于静态传值，只能传String类型。
@showDownload.user 为子组件调用父页面的方法，.user表明绑定用户自定义组件事件，通过$emit触发
<topicItem :countNum.sync="countNum" @showDownload.user="getShowDownload"></topicItem>
//区别：这里的事件不像原生小程序那样用要 bindtap=''，这里用 @tap=''，可以用 @tap.stop='' 阻止事件冒泡
<view @tap="previewImage"></view>
</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.setData({xx:'aa'}) 赋值。只需要用 ‘=’ 号就可以了
this.countNum = resData;
//区别： 这里要调用 $apply() 才能把最新数据渲染到页面，不然页面显示的还是原来的值
this.$aplly();
}
)
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);
