微信小程序开发学习笔记

发表于

这个笔记是阅读MINIPROGRAM文档的笔记记录，由于有Vue的基础，只记录了小程序和Vue中不同的地方，一些较为基础的部分就没有做记录

  • JSON文件在小程序代码中扮演静态配置的作用，在小程序运行之前就决定了小程序一些表现，需要注意的是小程序是无法在运行过程中去动态更新JSON 配置文件从而发生对应的变化的。

  • JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

  • 属性值若需要动态改变，则需要

    <tag attri="{{ data name }}"></tag>

2.2.3 逻辑语法

  • 可以在 双大括号 中进行三元运算、算术运算、字符串拼接、直接数字、字符串、数组

2.2.4 条件逻辑

  • wx:if=""
<view wx:if="{{length > 5}}"> 1 </view>
	<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
  • 如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">
   <view> view1 </view>
   <view> view2 </view>
 </block>

2.2.5 列表渲染

  • 使用 wx:for 控制属性绑定一个数组

  • 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

  • 使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名

  • 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要 wx:key 指定唯一标识符：

    • 字符串：item的某个性质，不能动态改变
    • 关键字*this，item本身是唯一字符串或者数字

2.2.6 模板

  • <template name="">定义模板
  • <template is="">使用模板

2.2.7 引用

Import

  • 在当前文件中使用目标文件定义的template
  • 不具有传递性

include

  • 将目标文件中除了<template /> <wxs />的整个代码引入 - 相当于拷贝到include位置

2.2.8 共同属性

2.3 WXSS样式

  • 公共样式：app.wxss

2.3.2 尺寸单位

  • Rpx

2.3.3 WXSS引用

  • 在文件中引用另一个样式文件 @import ‘目标文件路径

2.3.4 内联样式

  • 动态内联样式更新

  • Js:

    {
       eleColor: 'red',
       eleFontsize: '48rpx'
     }

  • Wxml:

    <view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

2.3.5 选择器

  • WXSS优先级：

    • Important, style, id, class, element
    • 优先级相同，后设置的优先级高于先设置

2.4 JS脚本

2.4.3 模块化

  • 被引用文件：module.exports =
  • 引用文件var x = require('被引用文件路径')
  • 直接调用x即可

2.4.4 脚本的执行顺序

  • 入口文件app.js，按照require模块顺序定义文件的运行顺序
  • 当app.js执行结束，小程序按照app.json定义的pages顺序，逐一执行

2.4.5 作用域

  • 文件中声明的变量和函数只在该文件中有效，不同文件中可以声明相同名字的函数和变量

  • 全局变量：使用全局函数getApp()获取全局实例，设置相关属性值

    • 先获取全局作用域：

      var global = getApp()
      global.globalValue = 'globalValue'
      console.log(global.globalValue)

  • 注意要先声明，再使用

  • 也可以在app.js中直接定义全局变量

第三章 理解小程序宿主环境

3.1 渲染层和逻辑层

  • 渲染层：wxml + wxss
  • 逻辑层：js

渲染层和数据相关

逻辑层负责产生、处理数据

逻辑层通过page实现setData方法传递数据到渲染层

3.1.2 通信模型

  • 渲染层 - webview
  • 逻辑层 - jscore

JsCore Webvi ew Native HTTPS Request

3.1.4 双线程下的界面渲染

  • 渲染层，宿主环境把WXML转化成对应的JS对象
  • 逻辑层数据变更时，通过宿主环境提供setData方法把数据从逻辑层传递到渲染层，经过对比前后差异，把差异应用到原来的dom树

3.2 程序与页面

3.2.1 程序

1. 程序构造器App()

  • App()构造器注册程序App，写在app.js，App为单例
  • onLaunch / onShow / onHide 三个回调是App实例的生命周期函数
参数属性 类型 描述
onLaunch Function 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow Function 当小程序启动，或从后台进入前台显示，会触发 onShow
onHide Function 当小程序从前台进入后台，会触发 onHide

程序的生命周期和打开场景

  1. 小程序全局数据
  • 小程序切换页面，逻辑层的js脚本运行上下文在同一线程
  • 不同页面通过App实例的属性来共享数据
  • 页面使用的setTimeout或者setInterval跳转到其他页面时，定时器没有清楚，需要自己清理