微信小程序开发踩坑指南

<view bindtap="bdtap" data-info="1"></view>

// js代码
bdtap() {
	// e.target.dataset 获取data-*的值
	console.log(e.target.dataset.info)
}

// 相当于 v-if
wx:if=""
wx:elif=""
wx:else

// 控制元素的显示和隐藏
hidden 

// 列表渲染
wx:for=""
wx:for-index=""
wx:for-item=""

<block></block>

Component({
    observers: {
        '字段1', '字段2': function(字段1的新值，字段2的新值) {
   			// do something         
        }
    }
})

Component({
  observers: {
    'some.subfield': function (subfield) {
      // 使用 setData 设置 this.data.some.subfield 时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
    },
    'arr[12]': function (arr12) {
      // 使用 setData 设置 this.data.arr[12] 时触发
      // （除此以外，使用 setData 设置 this.data.arr 也会触发）
    }
  }
})

Component({
  observers: {
    'some.field.**': function (field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      field === this.data.some.field
    }
  }
})

{
    "window": {
        navigationStyle: "custom"
    }
}

const fileManger = wx.getFileSystemManger()
const fileStr = fileManger.readFileSync('dir', 'base64')
// fileStr 即为 图片的base64

<navigator hover-class="none">
</navigator>

# 全局安装wepy-cli
yarn global add wepy-cli

# 创建项目
wepy new myproject
# 1.7.0之后的版本使用 wepy init standard myproject 初始化项目，使用 wepy list 查看项目模板

# 切换至目录
cd myproject

# 安装依赖
yarn

# 开启实时编译
wepy build --watch

# 根据生成一个新项目
init [options] <template-name> [project-name]
		
    -c --clone  use git clone
    --offline   use cached template
    -h, --help  output usage information

# 构建项目
build [options]
		-f, --file <file>      待编译wpy文件
    -s, --source <source>  源码目录
    -t, --target <target>  生成代码目录
    -o, --output <type>    编译类型：web，weapp。默认为weapp
    -p, --platform <type>  编译平台：browser, wechat，qq。默认为browser
    -w, --watch            监听文件改动
    --no-cache             对于引用到的文件，即使无改动也会再次编译
    -h, --help             output usage information

# 列出可用的官方模板
list [options]
		
		-g, --github  list all registered github projects
    -h, --help    output usage information

# 更新至最新版
upgrade [options]

		--cli   upgrade wepy-cli
    --wepy  upgrade wepy
    -h, --help  output usage information

├── dist                   小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules           
├── src                    代码编写的目录（该目录为使用WePY后的开发目录）
|   ├── 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页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件）
|   └── app.wpy            小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── package.json           项目的package配置

constructor() {
    super()
    // 通过下面这一行代码，可以为异步的API，
    // 开启Promise功能，这样，异步API调用的结果，返回值是Promise对象
    this.use('promisify')
}

import wepy from 'wepy'

export default class extens wepy.mixin {
  data = {}
  methods = {}
  computed = {}
  onLoad() {}
  // ,..
}

<template>
  <view></view>
</template>

<script>
import wepy from 'wepy'
// 1. 导入js，@为 src 层的绝对路径
import mix from '@/mixins/index.js'

export default class extends wepy.page {
  // 2. 导入并挂载
  mixins = [mix]
}
</script>

<style></style>