wepy备忘录

一、安装

1. NodeJs

https://nodejs.org/en/download/

2. cnpm

https://npm.taobao.org/

3. wepy 命令行工具。

cnpm install wepy-cli -g

二、创建及运行项目

1. 创建myproject

wepy init standard myproject

2. 安装依赖

cnpm install

3. 启动(开启实时编译)

wepy build --watch

4. 微信开发者工具配置

1. 使用微信开发者工具新建项目，填入项目名appid，选择dist目录。
2. 微信开发者工具-->项目-->关闭ES6转ES5。重要：漏掉此项会运行报错。
3. 微信开发者工具-->项目-->关闭上传代码时样式自动补全重要：某些情况下漏掉此项会也会运行报错。
4. 微信开发者工具-->项目-->关闭代码压缩上传 。重要：压缩混淆可以使用wepy-cli

5. 打包上传

1. 打包压缩混淆

npm run build

2. 点击微信开发者工具-->上传

三、项目结构

├── 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配置

四、参考文档

• 小程序官方文档
• wepy官方文档
• wepy Github地址
• wepy Wiki
• wepy小程序开发汇总

五、常用

1. 页面跳转

1. 普通页面 定义在pages下，跳转用

wx.navigateTo({
    url: 'oneTicket'
})
wx.redirectTo({
    url: 'oneTicket'
})

2. 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' : '' }}