dog-note

Appearance

文件配置及作用 ​

  • 可设置 action 属性让 当前页面 [pages/index/index] 不被索引
js
"action": "disallow",

项目创建 ​

  • WXML 是用来构建页面结构类似于 HTML
  • WXSS 是用来控制页面样式类似于 CSS

自定义编译模式 ​

  • 当我们开发时会默认跳转到 index 页面而不是我们当前正在编写的页面，这时可以通过自定义编译模式来解决

全局配置文件及配置使用 ​

window ​

window 常用配置 ​

window 节点配置 ​

  • 打开项目根目录下 app.json 进行设置
json
"window":{
    "backgroundTextStyle":"light", // 控制下拉 loading 样式且只有 light 或 dark 两个可选值
    "navigationBarBackgroundColor": "#380", // 用于设置导航条背景颜色
    "navigationBarTitleText": "test", // 用于设置小程序顶部标题
    "navigationBarTextStyle":"white"， // 用于设置顶部标题文本颜色且只能设置 white 或 black 两种颜色
    "enablePullDownRefresh": true， // 开启全局下拉刷新
    "backgroundColor": "#000"， // 控制下拉刷新窗口的背景颜色
    "onReachBottomDistance": 50 // 控制上拉触底刷新内容的距离，默认为50px且不带单位
},

tabBar ​

具体配置 ​

节点配置项 ​

每个 tab 项配置 ​

具体使用配置 ​

  • 打开项目根目录下 app.json 与 window 节点同级下创建 tabBar 进行设置
json
"tabBar": {
    "list": [ // 设置 tab 页列表，最少2个最多5个
        {
            "pagePath": "pages/index/index", // 配置当前 tab 页的路径
            "text": "首页" // 配置当前 tab 页文字标题
        },
        {
            "pagePath": "pages/logs/logs",
            "text": "logs"
        }
    ]
}

wxss（微信小程序样式） ​

rpx 单位 ​

组件使用 ​

view 组件使用 ​

scroll - view 组件使用 ​

swiper 组件 ​

text、rich-text 组件使用 ​

其他组件（button、image） ​

  • button 组件
  • image 组件

代码规范 ​

模板语法和定义数据 ​

动态绑定属性 ​

三元运算 ​

wx：if （类似 vue 的 v-if） ​

控制多个组件 ​

hidden（类似于 vue 的 v-show） ​

hidden 与 wx：if 区别 ​

wx：for 列表渲染 ​

  • 自定义索引名和当前项名称
  • wx：key

事件绑定 ​

事件对象 ​

target 和 currentTarget 区别 ​

bindtap 事件使用（手指点击） ​

在事件中处理 data 中数据 ​

事件传参 ​

bindinput 事件（表单输入） ​

  • 使用 bindinput 事件实现文本框与 data 数据双向绑定
html
<!-- value 可为 input 输入框绑定默认值 -->
<input type="text" value="{{message}}" bindinput="inputHanddler"></input>
js
inputHanddler(e){
    this.setData({
        message:e.detail.value // 将文本框的值与 data 的值互相绑定
    })
},

下拉刷新事件 ​

停止下拉刷新效果 ​

上拉触底事件 ​

添加 loading 提示效果 ​

提示消息 ​

js
// 可用于数据加载完毕提示用户
wx.showToast({
    title:'数据加载完毕！',
    icon：'none'
})

小程序的生命周期函数 ​

应用级生命周期 ​

页面级生命周期函数 ​

组件全部生命周期函数 ​

触发时机细节 ​

定义方法 ​

  • 和 data、method 同级定义 lifetimes

组件所在页面生命周期函数 ​

定义方法 ​

数据请求 ​

发起 get 请求 ​

在页面刚加载时就请求数据 ​

页面导航 ​

声明式导航 ​

导航到 tabBar 页面 ​

导航到非 tabBar 页面 ​

后退导航 ​

声明式导航传参 ​

编程式导航 ​

导航到 tabBar 页面 ​

  • 代码示例

导航到非 tabBar 页面 ​

后退导航 ​

  • 代码示例

编程式导航传参 ​

在 onLoad 中接收导航参数 ​

wxs 脚本 ​

基本使用 ​

内嵌 wxs 脚本 ​

外链 wxs 脚本 ​

  • 引用外链 wxs 脚本

wxs 脚本和 js 对比 ​

不能作为组件的事件回调 ​

隔离性 ​

性能好 ​

自定义组件 ​

自定义组件局部引用 ​

自定义组件全局引用 ​

在 app.json 文件下 和 window 节点同级下新增 usingComponents 节点进行添加组件

组件和页面的区别 ​

组件样式 ​

样式隔离 ​

组件数据、方法、属性 ​

data 数据 ​

methods 方法 ​

组件传值（类似于 vue 的 props） ​

data 和 properties 区别 ​

  • 和 vue 不同的是通过外界传递过来的数据 properties 是可以读写的

修改外界传递过来的数据 properties ​

监听器 ​

具体用法 ​

监听对象属性变化（多个数据） ​

监听所有属性变化 ​

纯数字字段 ​

使用规则 ​

组件插槽 ​

启用多个插槽 ​

定义多个插槽 ​

使用多个插槽 ​

组件通信 ​

属性绑定（父传子） ​

  • 父组件传递给子组件的数据，子组件修改了不会影响到父组件数据
  • 在子组件接收

事件绑定传值（子传父） ​

具体实现 ​

获取组件实例 ​

behaviors 代码混入 ​

创建 ​

导入及使用 ​

behaviors 中所有可用节点 ​

API Promise 化 ​

bash
npm i miniprogram-api-promise

组件调用 ​

全局数据共享方案 ​

基本概念 ​

安装 ​

bash
npm i --save mobx-miniprogram mobx-miniprogram-bindings

创建 Mobx Store 实例 ​

  • 在项目根目录创建 store 文件再创建 Store.js

引入共享数据 ​

在页面上使用 ​

在组件中使用 ​

小程序分包 ​

基本概念 ​

分包构成 ​

分包的加载规则 ​

分包体积限制 ​

配置方法 ​

分包引用原则 ​

独立分包 ​

应用场景 ​

配置方法 ​

引用原则 ​

分包预下载 ​

配置预下载 ​

预下载限制 ​

api 配置 ​

json
"navigationBarBackgroundColor": "#000" // 用来修改页面顶部颜色