wepy写小程序

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和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<res.length;i++){
         brochureList.push(res[i])
     }
     this.msgList = brochureList;
     this.$apply();
 }).then(res => wx.hideToast());

2、格式的错误

经常会报格式的错误，大多是空格不对
这里写图片描述
把wepy.config.js中的 eslint 改为 false，就不会检查格式错误了