wepy文档 https://tencent.github.io/wepy/document.html#/
开始 wepy init standard myproject ——>npm install安装node包——>wepy build –watch现在出现dist目录
一、开发者工具导入项目
运行命令行之后使用微信开发者工具打开项目(dist目录)
打开后如下图:
切记这四项不能选,选上会报错
二、代码规范
- 变量与方法使用尽量使用驼峰式命名,避免使用$开头。
- 入口,页面,组件的命名后缀为.wpy。外链的文件可以是其它后缀。
- 使用ES6语法开发。 框架在ES6下开发,因此也需要使用ES6开发小程序,ES6中有大量的语法糖可以让我们的代码更加简洁高效。
- 使用Promise: 框架默认对小程序提供的API全都进行了 Promise 处理,甚至可以直接使用async/await等新特性进行开发。
- 事件绑定语法使用优化语法代替: 原bindtap=”click”替换为@tap=”click”,原catchtap=”click”替换为@tap.stop=”click”。更多@符用法
- 事件传参使用优化后语法代替: 原bindtap=”click” data-index={{index}}替换为@tap=”click({{index}})”
- 自定义组件命名应避开微信原生组件以及功能标签。 不可以使用input, button, view, repeat等命名自定义组件。
- 入口文件app.wpy不需要template,所以编译时会被忽略
三、与vue相比
WePY中的methods属性只能声明页面wxml标签的bind、catch事件,不能声明自定义方法,这与Vue中的用法是不一致的。 普通自定义方法在methods对象外声明,与methods平级
四、遇到的问题
1、数据请求的几种方法
- 1)wepy.request方式。缺点:和wx.request方法相同,有些繁琐
wepy.request({
url:'https://www.xuanxuepai.top/index/chajianzhang/search_result',
data: {
content:_this.inputValue
},
success: function (res){
console.log(res);
_this.collegeNum = res.data.length;
if(_this.collegeNum == 0){
wx.showToast({
title: '找不到该院校!',
image: '../common/images/error.png',
duration: 2000
})
}else if(_this.collegeNum==1){
_this.$redirect('./academy',{code: res.data[0].code});
}else{
_this.$redirect('./academy',{list: _this.inputValue});
}
_this.$apply();
}
})
- 2)wepy.request 结合 promise。需要开启promise支持——>下载Promise ,引入模块
wepy.request({
url: (this._baseUrl || '') + url,
method: method || METHOD.GET,
data: data,
header: {
...this._header,
...header
}
}).then(res => this.interceptors.response ? this.interceptors.response(res) : res)
wepy.request('https://www.xuanxuepai.top/index/chajianzhang/latest').then(res => {
_this.latestData = res.data
_this.$apply();
})
3)封装数据请求方式
在src目录下创建两个文件夹network和configconfig下的文件index.js内容
export const baseUrl = 'https://www.xuanxuepai.top/index/chajianzhang'
表示数据请求的地址前边相同的那部分network下的文件地址https://gitee.com/shuran/codes/xf5ksa47pziqur8wcnoh394
- 使用方法 :
在app.wpy的页面引入
import req from '@/network'
import * as interceptor from '@/network/interceptor'
import {baseUrl} from '@/config'
onLaunch() {
req.baseUrl(baseUrl).interceptor(interceptor.request,interceptor.response)
}
在需要的页面中引入 import req from '@/network'
//请求的地址只需要写后边的部分。传值{data: data}
req.post('/brochure_list', { page: page }).then(res => {
console.log(res); //获取的res就是res.data
if(res == null){
loadedEnd = true
}
for(var i =0 ;i<res.length;i++){
brochureList.push(res[i])
}
this.msgList = brochureList;
this.$apply();
}).then(res => wx.hideToast());
2、格式的错误
经常会报格式的错误,大多是空格不对
把wepy.config.js
中的 eslint 改为 false,就不会检查格式错误了