一、先说基本使用
1、安装npm install wepy-cli -g
全局wepy脚手架
如果不想全局安装或是需要兼容wepy1.x的老项目,可以把wepy2.0安装到项目本地。
2、使用wepy init standard wepy-project
初始化一个wepy2.0的项目
此时可以选择vuex作为store,官方实现的。
二、使用中遇到的一些坑
1、如何动态绑定样式?
除了官方说明的基本的样式绑定外,这种在vue中常用的写法,需要改成下面的这种,才能生效。
<text v-for="(city,index) in item.cityList" :key="index" :class="[{ 'selected' : isSelected == city.siteName }]" class="city_name" @tap="selectedCity(city)">{{city.siteName}}</text>
而在vue中,我们可以是这样使用,类似三元表达式一样的。
<div v-for="(city,index) in item.cityList" :key="index">
<span :class="isSelected == city.siteName ? 'selected' :''" class="city_name" @tap="selectedCity(city)">{{city.siteName}}</span>
</div>
另外,v-for渲染 在vue中,是在外层遍历。而小程序中,则直接的使用v-for的元素上渲染。不明白的可以渲染输出对比一下元素节点就明白了了。这里是没有vue中灵活的。
在vue中,我们可以这么绑定样式:
<div class="item" v-for="(draw,index) in drawPrizes" :class="['item'+index]"> </div>
直接在小程序wepy2中使用是不生效的。
对应的语法应该是:
<block v-for="(item,index) in drawPrizes">
<div class="{{'item item' + index }}" data-class="{{'item' + index }}">
</div>
</block>
2、在wepy2.0中,表单组件,官方是实现了v-model双向绑定的,不用自己去写。但是,目前,组件是没有实现的。这个和vue一样,还是需要自己实现。总之,肯定是比wepy1.x要好用了。
3、在 wepy2.0 中,事件对象都 被 wepy 包了一层
在原生的小程序和wepy1.x中, 我们可以通过e.detail获取事件对象,以及绑定在原生节点上的自定义属性。
但是在wepy2.0中,我们需要使用e.$wx.detail
去获取,套了一层$wx
。具体,可以打印出来观看对比。
4、小程序中可以使用自定义组件和第三方组件
每个页面,都有一个配置选项
<config>
{
navigationBarTitleText: '世联集',
usingComponents: {
'build-item': '../components/buildItem'
}
}
</config>
直接向使用vue中一样,标签引用就可以了。属性绑定和事件绑定,与vue语法一样。
5、如何在wepy2.0中使用globalData
在官方示例中,我们可以看到app.wpy
中定义了一个这个属性。对应的就是小程序的全局数据对象。
wepy.app({
hooks: {
// App 级别 hook,对整个 App 生效
// 同时存在 Page hook 和 App hook 时,优先执行 Page hook,返回值再交由 App hook 处
'before-setData': function (dirty) {
console.log('setData dirty: ', dirty)
return dirty
}
},
globalData: {
userInfo: null
},
那么,如何在其他页面中获取这个全局对象,并且修改他呢?
需要通过this.$app.$options.globalData
来获取或设置。
直接赋值就修改了。
好坑啊? 文档太少了。 通过this.$app可以拿到根组件app.wpy
然后就可以看到其他的东西拉。
6、小程序如何分包以及分包有哪些注意事项
小程序一个包大小限制在2M,超出后就需要分包。不然无法上传代码。
分包就是在app.wpy页面进行配置。
需要注意一下几点:
- tabber页面必须在主包
- 一些公共函数等只能放在主包,分包可以调用访问主包的方法资源,反过来,则不行。
所以我们一般把非tabber页面,并且,不是很急切初次加载的页面分包出去。
配置:
参考
pages: [
'pages/index',
'pages/build/list'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
},
permission: {
'scope.userLocation': {
'desc': '你的位置信息将用于小程序位置接口的效果展示'
}
},
subPackages: [
{
'root': 'packageBuild',
'pages': [
'pages/home/search',
'pages/home/findhouse'
]
}
],
对应的,默认的pages文件夹,放置主包页面,
然后建一个packageBuild
分包对应的文件夹名,名字可以自定义,需要对上即可。分包内依然可以有自己的静态图片、组件等。一样的。
src目录参考:
|-------components
|-------packageBuild
| |------pages
| |------components
|-------pages
| |------index.wpy
| |------build
|-------store
|-------app.wpy
分包后,分包前与分包后,最大的区别就分包的页面路径变了,所有,在主包或分包直接户型跳转的时候,页面路径需要修改。
主包跳转分包示例:
wx.navigateTo({
url: '/packageBuild/pages/build/houseTypePic?buildId=' + this.buildId + '&picId=' + picId
})
分包跳主包示例:
wx.navigateTo({
url = '/pages/build/house?buildId=' + this.buildId + '&isShare=1'
})
总结就是需要把分包的根路径带上。
7、如何在app.wpy中调用vuex,即store中的方法呢?
如果向其他页面一样,先import store 然后挂载调用的话,会包使用vuex之前,需要先vue.use(vuex)这个错误。
怎么办? 难道不能用了? 我需要在app.wpy中的钩子函数中监听小程序的状态,来调用store的某个方法。
使用方法有两种:
参考 官方isssue https://github.com/Tencent/wepy/issues/2447
方法1:
只能通过先require('./store').default
然后通过this.$options.store;
拿到store ,然后调用。
wepy.use(vuex)
这个函数 在app.wpy当前页执行。
import wepy from '@wepy/core'
import eventHub from './common/eventHub'
import vuex from '@wepy/x'
wepy.use(vuex)
wepy.app({
store: require('./store').default,
hooks: {
// App 级别 hook,对整个 App 生效
// 同时存在 Page hook 和 App hook 时,优先执行 Page hook,返回值再交由 App hook 处
'before-setData': function (dirty) {
console.log('setData dirty: ', dirty)
return dirty
}
},
globalData: {
userInfo: null,
login: false
},
onLaunch() {
this.$store = this.$options.store;
this.$store.dispatch('incrementAsync');
},
methods: {
}
})
</script>
方法2:
删掉app.wpy中官方写的wepy.use(vuex)
全部操作放到store下面的index.js文件中去执行。然后app.wpy中直接引入最后的store文件
app.wpy
import wepy from '@wepy/core'
import eventHub from './common/eventHub'
// import vuex from '@wepy/x'
// wepy.use(vuex)
import store from '@/store';
wepy.app({
hooks: {
// App 级别 hook,对整个 App 生效
// 同时存在 Page hook 和 App hook 时,优先执行 Page hook,返回值再交由 App hook 处
'before-setData': function (dirty) {
console.log('setData dirty: ', dirty)
return dirty
}
},
globalData: {
userInfo: null
},
onLaunch() {
store.dispatch('incrementAsync');
},
methods: {
}
})
store文件夹下面的index.js
import Vuex from '@wepy/x'
// 添加下面两行
import wepy from '@wepy/core';
wepy.use(Vuex)
export default new Vuex.Store({
state: {
counter: 0
},
mutations: {
increment (state) {
state.counter++
},
decrement (state) {
state.counter--
}
},
actions: {
increment ({ commit }) {
commit('increment')
},
decrement ({ commit }) {
commit('decrement')
},
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
})
官方文档根本就没有任何说明。网上搜索好多都没有答案。希望可以帮到你。
8、要根据后台给的URL动态生成二维码
参考使用一下现成的库
https://github.com/yingye/weapp-qrcode
9、wepy 里正确调用 this.selectComponent
在wepy1.x版本里,是这样用的:
this.$wxPage.selectComponent()
但是在wepy2.x版本里,已经改了用法了。
this.$wx.selectComponent('选择器')
示例:引入组件,并且调用组件自身上的方法。
写聊天页面的时候,为了解决输入框要顶上,但是聊天列表不顶上的问题。
<template>
<div class="container-wrap">
<calendar2 id="calendar" config="{{calendarConfig2}}" />
</div>
</template>
wepy.page({
store,
data: {
calendarConfig2: {
multi: true
}
},
onReady() {
const calendar = this.$wx.selectComponent('#calendar').calendar
calendar.jump({year: 2018, month: 6, date: 6})
}
})
</script>
<config>
{
navigationBarTitleText: 'demo',
usingComponents: {
"calendar2": "../components/calendar2/index",
}
}
</config>
10、小程序文本框自带手机键盘的高度,监听focus事件可以获取到
<textarea bindfocus="fixedPosition"/>
page.js
//输入框聚焦时
fixedPosition(event){
//加个延时器保险一下
setTimeout(() => {
this.setData({
fixedScrollTop: event.detail.height? event.detail.height: 0, //整个页面的高度往上顶软键盘的高度
scrollTop: this.data.messages.length * 1000 //聊天列表滚动到最低
});
});
},
10、部分机型就算遮罩层也无法阻挡底层页面的滚动,可以在遮罩层的view加一个属性catchtouchmove=“ture”
<view class="container" catchtouchmove="ture">
11、做打开文档预览功能的时候,苹果手机不能主动识别文件的后缀名,要手动添加fileType字段
wx.downloadFile({
url: 'xxxxxxxx.xxx', //可以是后台传过来的路径
success: function(res) {
console.log('下载成功',res)
const filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
fileType: fileSuffix
12、苹果手机时间格式的特殊要求(h5也是这样)
苹果手机不支持这种格式2020-01-01 00:00:00,前面带-的,要转换成下面这种才支持
2020/01/01 00:00:00,这种才支持,顺便写一个方法
let createTime = res.date.replace(/-/g, '/');
13、企业微信里中文传递要转码
使用web-view跳转到时候遇到一个问题,这个页面可以分享,分享出去的url路径带了中文,在微信端跳转的时候没问题,但是在企业微信跳转打不开,问题是中文没有转码
onShareAppMessage() {
return {
path: `${this.route}?pathUrl=${encodeURIComponent(this.data.url)}&userId=${wx.getStorageSync('userId')}`
};
}