wepy写小程序-白红宇

wepy文档开始 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和config
- config下的文件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
    
      wx.hideToast());复制代码

2、格式的错误

经常会报格式的错误，大多是空格不对

把

wepy.config.js中的 eslint 改为 false，就不会检查格式错误了