原生微信小程序

小程序框架

目录结构

|- card
	index.js   // 页面逻辑(必需)
	index.wxml // 页面结构(必需)
	index.json // 页面配置
	index.wxss // 页面样式表
|- utils // 工具函数
app.js // 小程序逻辑(必需)
app.json // 小程序公共配置(必需)
app.wxss // 小程序公共样式表
sitemap.json // 爬虫文件
project.config.json // 项目配置文件
project.private.config.json // 项目私人配置文件(优先级更高)

逻辑层

app.js

App({
  onLaunch (options) {},
  onShow (options) {},
  onHide () {},
  one rror (msg) {},
  globalData: 'I am global data'
})

// getApp(整个小程序只有一个 App 实例，是全部页面共享的)
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

page.js

• behavior.js

module.exports = Behavior({
	data: { msg: 'behavior类似mixin' },
	methods: { custom() {} }
})

• index.js

const mineBehavior = require('/path/to/behavior.js')

// Page构造器适用于简单的页面,复杂页面推荐Component构造器
Page({
  behaviors: [mineBehavior],
  data: {
    text: "This is page data."
  },
  onl oad: function(options) {}, // 页面创建时执行
  onShow: function() {}, // 页面出现在前台时执行
  onReady: function() {}, // 页面首次渲染完毕时执行
  onHide: function() {}, // 页面从前台变为后台时执行
  onUnload: function() {}, // 页面销毁时执行
  onPullDownRefresh: function() {}, // 触发下拉刷新时执行
  onReachBottom: function() {}, // 页面触底时执行
  onShareAppMessage: function () {}, // 页面被用户分享时执行
  onPageScroll: function() {}, // 页面滚动时执行
  onResize: function() {}, // 页面尺寸变化时执行
  onTabItemTap(item) { // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  viewTap: function() { // 事件响应函数
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {} /* setDataCallBack */)
  },
  // 自由数据
  customData: { hi: 'MINA' }
})

Component({
  behaviors: ['wx://component-export'],
  // 如果配置该方法,selectCompoent获取的会变成自定义值{ myField: 'myValue' }
  export() {
    return { myField: 'myValue' }
  },
  options: {
    multipleSlots: true // 启用多slot支持
  },
  data: { total: 0 },
  properties: {
    myValue: String
  },
  // 组件所在页面的生命周期
  pageLifetimes: {
    show: function () { },
    hide: function () { },
    resize: function () { },
  },
  // 组件自身的生命周期
  lifetimes: {
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },
  observers: {
    'a,b': function(a,b) {
      this.setData({ total: a + b })
    }
  },
  methods: {
    update: function() {
      // 更新 myValue
      this.setData({
        myValue: 'leaf'
      })
    }
  }
})

路由

注意事项

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。

API

wx.chooseMedia() // 选择媒体文件(图片/音视频等)
wx.request() // 发送请求
wx.login() // 登录获取code
wx.requestPayment() // 发起微信支付(需要申请微信支付)
wx.chooseAddress() // 调用收获地址原生界面(地理相关需要开通权限)

// 缓存相关(上限为10M)
wx.setStorage()
wx.setStorageSync()
wx.getStorage()
wx.getStorageSync()
wx.clearStorage()
wx.clearStorageSync()
wx.removeStorage()
wx.removeStorageSync()

// 文件系统(wx.env.USER_DATA_PATH:开发者对这个目录有完全自由的读写权限)
const fs = wx.getFileSystemManager()
fs.writeFileSync(`${wx.env.USER_DATA_PATH}/hello.txt`, 'hello, world', 'utf8')

获取节点信息

// 获取节点坐标信息
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
  res.top // #the-id 节点的上边界坐标（相对于显示区域）
})
query.selectViewport().scrollOffset(function(res){
  res.scrollTop // 显示区域的竖直滚动位置
})
query.exec()

组件

自定义组件

// 需要在当前页面json添加如下配置(如在app.json配置则为全局)
{
  "usingComponents": {
	  "custom-component": "/pages/custom-component/index"
  }
}

组件间通信

// 父组件
<child id="child" bind:fn="fn" />
Page({
	fn() {
		// 获取组件实例
		const child = this.selectComponet('#child')
		console.log(child)
	}
})

// 子组件
<button bind:tap="tap">调用父组件方法</button>
Page({
	tap() {
		// data为传递给父组件数据,option包括是否冒泡/是否捕获/是否穿越边界
		this.triggerEvent('fn', data, option)
	}
})

组件模板

<template name="odd">
	<view>odd</view>
</template>
<template name="even">
	<view>even</view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
	<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

Component构造器
微信小程序开发：微信小程序生命周期总结
组件生命周期
数据监听器
微信支付
地理位置接口新增与相关流程调整
小程序用户信息相关接口调整公告
文件系统
canvas画布
分包加载
微信登录
获取昵称头像
小程序配置/场景值/框架接口/wxml语法/wxs语法
小程序组件