小程序组件化开发:wepy

官网地址:https://tencent.github.io/wepy/document.html#/

安装:

1.在安装前确认是否安装了node (node -v)如果有会输出一个版本号

2.全局安装wepynpm install wepy-cli -g

3.安装依赖 npm install

4.安装promise npm install promise-polyfill --save

5.有用到less的项目需要安装less npm install -g less

6.拉取代码 mb要单独拉取(封装的小程序的一些方法)

(不通用,这个是俺们公司有)

7.开启实时编译 wepy build --watch

会编译生成小程序的目录dist,从小程序打开的时候开dist目录

phpStrom代码高亮:

打开Settings,搜索Plugins,搜索Vue.js插件并安装。

打开Settings,搜索File Types,找到Vue.js Template,在Registered Patterns添加*.wpy,即可高亮。

vscode代码高亮:

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

 2. 打开任意 .wpy 文件。

 3. 点击右下角的选择语言模式,默认为纯文本。

 4. 在弹出的窗口中选择 .wpy 的配置文件关联...。

 5. 在选择要与 .wpy 关联的语言模式 中选择 Vue。

6. 或者配置语言基础设置 然后重启

"files.associations": {

"*.wpy":"vue"

},

问题:

微信开发者工具 详情里面的设置

2.promise是否安装

3.mb目录是否拉取了

4.wepy是否是全局安装的

5.编辑器是否更新(不是最新版本经常会有一些莫名其妙的错)

6.appid是否对应。(否则可能会报微信小程序 登陆40029)

7.permission denied.

在全局安装的时候不能编译 报没有权限的错误

全局安装的时候已管理员的身份打开安装

1.需注意的是,在异步函数(一般是请求)中更新数据的时,必须手动调用$apply方法,才会触发脏数据检查流程的运行

2.一些和小程序本来写法不一样的地方

现在的文件结构是

css html js都在一个页面(样式嫌乱的话可以把所有样式统一写在less在app

.wpy引入)

3.bindtap bindinput等 可写为@tap @input 不过写原来的貌似也不影响

4.循环用的reapet便签 不过原来的wx:for也还可以用

5.自定义的方法 写在method里面 其他比如onload等函数可以写在外部

6.wepy项目中使用Promise

https://github.com/Tencent/wepy/wiki/wepy%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8Promise

来个完整的目录结构看一下,基本用到的就是这些 config中是之前json文件的内容

还有在app.wpy中

*别的页面取全局数据和之前不一样 this.$parent.globalData

细节还蛮多的 记不起来看文档 文档是个好东西 哈哈哈哈哈哈哈哈哈

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180531G18XXF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励