小程序快速开发(使用Wepy框架)

前言

前几周公司要做小程序开发，在开发之前，首先要确定的就是技术选型，看了一些资料，用Wepy能快速搭建好项目，开发起来一些语法、写法跟Vue相似，于是决定用wepy开发。下面就来简单的说说wepy的一些优点和相关步骤：

WePY优点

 

• 1. 开发风格接近 Vue.js

           + 支持 `组件化` 开发

           + 支持 `props` 传值

           + 支持 `data` 数据

           + 支持 `methods` 处理函数

           + 支持 `computed` 计算属性

           + 支持 `@` 绑定元素的处理事件 `bindtap` , `bindinput`

• 2. 支持 Promise 和 ES6 新特性 、async 和 await
• 3. 支持 Less 、 Sass 等 CSS 预编译语言
• 4. 支持 npm 第三方资源
• 5. 对小程序本身的优化，如请求列对处理，优雅的事件处理，生命周期的补充，性能的优化等等

 

搭建WePY项目

 

1. 全局安装 `WePY` 命令行工具：

    npm i wepy-cli -g

2. 创建 `WePY` 项目：

    wepy init standard [项目名称]

3. 切换到项目根目录，安装所需依赖项：

    cd 项目名称npm install

4. 开启实时编译：

    wepy build --watch

 

到此，小程序项目就搭建起来了，开启实时编译之后就会有一个dist文件夹，现在就可以打开从官网上下载的微信开发工具，导入创建好的项目（只导入dist文件夹就好），输入appID，就可以开启小程序之旅了！！！

配置微信开发者工具

出现脚本错误或者未正确调用 Page()

1. `微信开发者工具`-->`项目`-->`关闭ES6转ES5`。 重要：漏掉此项会运行报错。

2. `微信开发者工具`-->`项目`-->`关闭上传代码时样式自动补全`。 重要：某些情况下漏掉此项也会运行报错。

3. `微信开发者工具`-->`项目`-->`关闭代码压缩上传`。 重要：开启后，会导致真机computed, props.sync 等等属性失效。（注：压缩功能可使用WePY提供的build指令代替，详见后文相关介绍以及Demo项目根目录中的`wepy.config.js`和`package.json`文件。），如下图：

wepy项目创建界面

vsCode中设置 `.wpy` 文件代码高亮

1. 在 Code 里先安装 Vue 的语法高亮插件 `Vetur`。

2. 打开任意 `.wpy` 文件--点击右下角的选择语言模式，默认为`纯文本---在弹出的窗口中选择 `.wpy 的配置文件关联...`---在`选择要与 .wpy 关联的语言模式` 中选择 `Vue`。

点开.wpy，代码结构跟VUE几乎完全一样，wxml对应的是template标签里面的内容，js是script标签，wxss对应的是<style lang='less'>

 wepy项目中发起数据请求

> 注意： 在小程序项目中，没有 浏览器的概念，因此，也就没有 Ajax 的概念；

>

> 只要 请求的数据接口，是 HTTPS 协议的，同时，请求的接口域名，配置到了后台的 `安全域名`中，则，小程序就能够正常请求接口数据；如果是本地开发，也可以用http的url，只要把不校验合法域名勾上就行。

 

代码示例：

注意使用 `$apply()` 函数通知数据变化；

> 需注意的是，在异步函数中更新数据的时，必须手动调用`$apply`方法，才会触发脏数据检查流程的运行。

尾声

到此项目的第一个界面已经开发完，由于第一次使用wepy，不是很熟悉，分享出来共勉，后续遇到其他问题会继续更新。