一、安装
1. NodeJs
2. cnpm
3. wepy 命令行工具。
cnpm install wepy-cli -g
二、创建及运行项目
1. 创建myproject
wepy init standard myproject
2. 安装依赖
cnpm install
3. 启动(开启实时编译)
wepy build --watch
4. 微信开发者工具配置
- 使用
微信开发者工具
新建项目,填入项目名appid,选择dist
目录。 -
微信开发者工具
-->项目-->关闭ES6转ES5。重要:漏掉此项会运行报错。 -
微信开发者工具
-->项目-->关闭上传代码时样式自动补全重要:某些情况下漏掉此项会也会运行报错。 -
微信开发者工具
-->项目-->关闭代码压缩上传 。重要:压缩混淆可以使用wepy-cli
5. 打包上传
- 打包压缩混淆
npm run build
- 点击
微信开发者工具
-->上传
三、项目结构
├── dist 微信开发者工具指定的目录(Wepy编译生成)
├── node_modules 依赖的包
├── src 开发目录
| ├── components WePY组件目录
| | ├── com_a.wpy 可复用的WePY组件a
| | └── com_b.wpy 可复用的WePY组件b
| ├── pages WePY页面目录
| | ├── index.wpy index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)
| | └── other.wpy other页面
| └── app.wpy 小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)
└── package.json 项目的package配置
四、参考文档
五、常用
1. 页面跳转
- 普通页面 定义在pages下,跳转用
wx.navigateTo({
url: 'oneTicket'
})
wx.redirectTo({
url: 'oneTicket'
})
- tab页面 定义在tabBar下面 跳转用
wx.switchTab({
url: 'home'
})
1. 点击事件
@tap="delAddress({{index}})"
2. 循环
<repeat for="{{groupList}}" index="index" item="item" key="key">
<group :grouplist="item" :indexa="index"></group>
</repeat>
或者
<block wx:for-items="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<view @tap="tap" class="mylist">
<text>{{item.id}}</text>: {{item.title}}
</view>
</block>
3. 接口调用
4. 数据更新
this.$apply()
5. 显示隐藏
wx:if="{{x==1}}"
6. 样式控制
:class="{'choose':dataList.checked}"
或者
{{ fixed ? 'fixed' : '' }}