10月10, 2019

微信小程序的框架wepy和taro

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

安装:

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

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

3.安装依赖 npm install

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

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

6.拉取代码 mb要单独拉取(封装的小程序的一些方法) git://172.16.1.3/weapp/global.git

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

注意:

安装的第六点有所更改,现在不在单独拉取,用npm install一并安装

1.在package.json中的dependencies里面增加:"mb-base": "git+ssh://git@git.microb.cn:weapp/mb-base.git", alt

2.在npm install安装的时候有权限 在共享的U盘里面 密钥里的文件复制在 当前用户(找到自己是哪个用户)下面的C(:\Users\Stump2(这是我的用户名,找到自己的).ssh ) 改名为id_rsa 没有后缀

3.就可以愉快的npm install了 成功后在node_modules里面会有mb-base目录,里面就是之前封装的小程序的一些方法

4.页面的引用也进行修改

以前:import {user, http} from '@/mb/all';

现在:import {user, http} from 'mb-base';

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。

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

    "files.associations": {

    "*.wpy": "vue"

    },

问题:

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

2.promise是否安装

3.mb目录是否拉取了

4.wepy是否是全局安装的

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

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

7.permission denied.

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

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

一些遇到的问题:

[WARNING] WARNING IN : src\pages\center\update.wpy

[xmldom warning] unclosed xml attribute

可能遇到的问题:

请求的时候不要随便用user.ready 要不然请求不执行

小程序的规范 在写页面的时候根据不同的业务逻辑 划分为不同的子目录 不要全部都在根目录里

之前存放图片的地址都在根目录的image里面 现在不要image目录 改为assets assets-remote两个目录

assets 存放一些内部用的图片 比如tabbar用的icon

assets-remote 可以外部引用的,最后放在服务器上,最后只需要修改assetsRootPath

怎么用:

在app.wpy中设置一下路径

util.config({

assetsRootPath: '/assets-remote'

})

用到图片的地方:

util.asset('/image/banner1.jpg')

本文链接:http://zzl.bzpwhite.cn/post/微信小程序框架.html

-- EOF --

Comments