Wepy开发小程序文档

Posted 2021-01-31 刘兵

1. 环境配置

（1） 安装nodejs,下载地址：https://nodejs.org/zh-cn/

（2） 全局安装或更新WePY命令行工具，在命令行中执行

npm install wepy-cli –g

1. 项目初始化

(1) 创建项目：wepy init standard cust

(2) 切换至项目目录：cd cust

(3) 安装依赖：npm install

(4) 开启实时编译: wepy build –watch

(5) 打开微信开发者工具，创建项目，目录选择dist

1. 项目目录结构

├── dist                   小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）

├── node_modules           npm包

├── src                    代码编写的目录（该目录为使用WePY后的开发目录）

|   ├── components         WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）

├── helper                 公用js 

|   |   ├── ajax.js        ajax负责和后端的交互

|   |   ├── filter.wxs     过滤器

|   |   ├── func.js        公用方法

|   |   ├── host.js        域名配置

|   |   ├──WxValidate.js   表单验证的方法

 

|   ├── pages              WePY页面目录（属于完整页面）

|   |   ├── index.wpy      index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）

|   └── app.wpy            小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）

|   ├── mixins             混合代码

|   |   ├──bindValue.js    绑定数据的混合代码

|   |   ├──listMixins.js   列表页的混合代码

└── package.json           项目的package配置

1. 注意事项

(1) 关闭ES6转ES5选项，关闭。 重要：未关闭会运行报错。

(2) 关闭上传代码时样式自动补全选项，关闭。 重要：某些情况下漏掉此项也会运行报错。

(3) 关闭代码压缩上传选项，关闭。重要：开启后，会导致真机computed, props.sync 等等属性失效。

(4) 开启代码验证后，要注意空格和分号

(5) 使用button跳转授权页面时没效果

1. API

(1)ajax 调用ajax方法时需要传的参数/**ajax

 * @param {Object} before 请求前的询问

 * @param {Object} loading 请求过程中的loading

 * @param {Object} fn 请求完后执行的回调

 * @param {Object} data 请求的参数

 * @param {Object} modal 请求完后的对话框

 * @param {Object} hint 请求完后的提示框

 */

(2) WxValidate表单验，调用此方法时需要实例化这个对象，初始化这个对象时，将验证规则和

验证字段传进去

/**

 * 表单验证

 * @param {Object} rules 验证字段的规则

 * @param {Object} messages 验证字段的提示信息

 *

 */

 

(3) 在原生代码里wepy.$instance代替getApp()