微信小程序学习笔记

发表于 | 分类于
| 字数统计 1.8k | 阅读时长 7

代码构成

  • json 后缀的 JSON 配置文件
  • js 后缀的 JS 脚本逻辑文件
  • wxml 后缀的 WXML 模板文件
  • wxss 后缀的 WXSS 样式文件

    JSON 配置

    全局配置

    app.json：当前小程序的全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

    页面配置

    page.json：可以独立定义每个页面的一些属性，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

    工具配置

    project.config.json

JS 逻辑

生命周期

  • App() 函数用来注册一个小程序

  • onLaunch：小程序初始化完成时（全局只触发一次）

  • data：页面的初始数据

    生命周期回调函数

  • onLoad：监听页面加载
  • onShow：监听页面显示，或从后台进入前台显示时
  • onReady：监听页面初次渲染完成，一个页面只会调用一次
  • onHide：监听页面隐藏/切入后台时
  • onUnload：监听页面卸载

    页面事件处理函数

  • onPullDownRefresh：监听用户下拉动作
  • onReachBottom：页面上拉触底事件的处理函数
  • onShareAppMessage：用户点击右上角转发
  • onPageScroll：页面滚动触发事件的处理函数
  • onTabItemTap：当前是 tab 页时，点击 tab 时触发

    组件事件处理函数

  • bindtap

    1
    2
    3
    4
    5
    6
    <view bindtap="viewTap"> click me </view>
    Page({
    viewTap: function() {
    console.log('view tap')
    }
    })

  • Page.route

    1
    2
    3
    4
    5
    Page({
        onShow: function() {
            console.log(this.route)
        }
    })

  • Page.prototype.setData(Object data, Function callback)

    1
    2
    3
    4
    1.直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
    2.仅支持设置可 JSON 化的数据。
    3.单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
    4.请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

other

  • onError：小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
  • onPageNotFound：小程序要打开的页面不存在时触发，会带上页面信息回调该函数

路由

路由方式

  • 初始化：小程序打开的第一个页面（新页面入栈）
  • 打开新页面：调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>（新页面入栈）
  • 页面重定向：调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>（当前页面出栈，新页面入栈）
  • 页面返回：调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮（页面不断出栈，直到目标返回页）
  • Tab 切换：调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab（页面全部出栈，只留下新的 Tab 页面）
  • 重启动：调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>（页面全部出栈，只留下新的页面）

Tips:

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

模块化

  • 通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置

    暴露

  • 模块只有通过 module.exports 或者 exports 才能对外暴露接口。
  • exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // common.js
    function sayHello(name) {
    console.log(`Hello ${name} !`)
    }
    function sayGoodbye(name) {
    console.log(`Goodbye ${name} !`)
    }

    module.exports.sayHello = sayHello
    exports.sayGoodbye = sayGoodbye

引入

​在需要使用这些模块的文件中，使用 require(path) 将公共代码引入（tip: require 暂时不支持绝对路径）：

1
​var common = require('common.js')​

API

  • 以 on 开头的 API 用来监听某个事件是否触发
  • 以 Sync 结尾的 API 都是同步 API
  • 注意：多数 API 的回调都是异步，需要处理好代码逻辑的异步问题。

视图层

WXML

Mustache 语法，双括号

数据绑定

1
<view> {{message}} </view>

列表渲染

1
2
3
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>

条件渲染

1
2
3
4
5
6
<view wx:if="{{condition}}"> </view>
Page({
data: {
condition: true
}
})

模板

定义：

1
2
3
4
5
6
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

使用：

1
<template is="msgItem" data="{{...item}}"/>

事件

以bind或catch开头，然后跟上事件的类型。bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

1
<view bindtap="add"> {{count}} </view>

引用

  • import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
  • include 可以将目标文件除了

WXSS样式

  • app.wxss 作为全局样式，page.wxss 仅对当前页面生效，会覆盖 app.wxss 中相同的选择器。
  • 尺寸单位
    rpx（responsive pixel）: 750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

  • 样式导入

    1
    @import "common.wxss";

  • 内联样式：
    style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

    1
    <view style="color:{{color}};" />

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

1
<view class="normal_view" />

  • 选择器：.class #id element element,element ::after ::before

基础组件

属性类型

Boolean,Number,String,Array,Object,EventHandler,Any

公共属性

id,class,style,hidden,data-*,bind*/catch*

WSX（WeiXin Script）

WXS 代码可以编写在 wxml 文件中的 标签内，或以 .wxs 为后缀名的文件内。
wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。

  • module 属性：当前 标签的模块名
  • src 属性可以用来引用其他的 wxs 文件模块。
  • exports: 通过该属性，可以对外共享本模块的私有变量与函数。
  • 引入方式：
    1
    2
    3
    var tools = require("./tools.wxs");
    //或者
    <wxs src="./../tools.wxs" module="tools" />

数据类型

number ： 数值
string ：字符串
boolean：布尔值
object：对象
function：函数
array : 数组
date：日期
regexp：正则

微信小程序开发文档

-------------本文结束感谢您的阅读-------------