微信小程序学习笔记（一）

2021-09-29 666次阅读 0条评论 0人点赞

申请小程序账号和安装微信开发者工具就略过了，官方文档挺详细的

项目结构

了解项目结构前，需要知道微信小程序有 5 种文件类型

  • json：配置文件
  • wxss：样式文件，类似于 css文件
  • wxml：页面结构文件，类似于 html 文件
  • js：逻辑文件，在微信小程序中，类似于 vue 中的 vue 文件
  • wxs：逻辑文件，类似于 js 文件，也可以直接写在 wxml 里的 wxs 标签中

目录结构

  • app.json：微信小程序的全局配置文件，页面的路径、标题栏和导航栏的样式等都在这里配置
  • app.wxss：全局样式文件
  • app.js：项目的入口文件，主要是一些生命周期钩子以及全局数据
  • sitemap.json：配置小程序及其页面是否能被索引
  • page：存放所有的页面，一个页面一个文件夹，每个页面都必须有 wxml 和 js 文件
  • component：存放所有的组件，很多页面有公共可复用的代码，可以做成组件来实现复用
  • utils：存放公共的 js 文件，一般是一些工具类的函数，比如时间格式化之类的

全局配置

全局配置就是 app.json 文件中的配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

常用的主要是前面三个配置项，我介绍一些其中常用的配置

  • pages：配置各个页面的路径，默认第一个是首页，也就是小程序一打开就显示的页面
  • window：用于设置小程序的状态栏、导航条、标题、窗口背景色。
    • navigation：navigation开头的都是导航栏相关的配置，就是最上方的标题栏
      • navigationBarBackgroundColor：导航栏背景色，只支持十六进制的写法
      • navigationBarTextStyle：导航栏标题的颜色，仅支持 dark / white
      • navigationBarTitleText：标题文字内容
    • background：background开头的都是背景相关的配置，一般情况下看不见，开启下拉刷新之后，下拉露出的部分就是 background
      • backgroundColor：背景颜色，只支持十六进制写法
      • backgroundTextStyle：下拉刷新时，那三个小圆点的样式，仅支持 dark / white
      • enablePullDownRefresh：是否开始下拉刷新
  • tabBar：底部切换页面用的 tab 栏
    • color：文字默认颜色，仅支持十六进制
    • selectedColor：文字选中时的颜色，仅支持十六进制
    • backgroundColor：背景色，仅支持十六进制
    • borderStyle：tabbar 上边框的颜色， 仅支持 black / white
    • list：一个数组，存放各个 tab 按钮的配置
      • pagePath：页面路径
      • text：按钮上的文字
      • iconPath：按钮上图标的路径
      • selectedIconPath：选中后的图标路径

sitemap 配置

默认索引全部，一般可以不用改，如果要修改可以参考官方文档，有详细的配置和示例

入口文件

入口文件也就是 app.js，简单的项目可能不需要在里面写什么，主要是一些生命周期的钩子和全局数据

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})
  • onLaunch：小程序初始化完成时触发，全局只触发一次
  • onShow：小程序启动的时候触发，后台切换回前台时也会触发
  • onHide：前台切换到后台时触发
  • onError：运行出错时触发
  • onPageNotFound：要打开的页面不存在时触发
  • globalData：全局数据，可以通过 getApp().globalData 获得

页面配置

每个页面都可以有自己的 json 文件来配置，页面中的配置项会覆盖全局配置 windows 中的相同配置项，大部分配置项也和全局配置 Windows 里的一样，就不详细展开了

数据绑定

小程序的语法和 Vue 非常相似，wxml 文件中就可以使用类似 Vue 的一些语法，其中最基础的自然是插值语法

<!--wxml-->
<view> {{message}} </view>

这里的 view 标签可以看成是 html 原生的 div 标签，基本是完全相同的

既然这里用了 message 那么自然是要有地方要定义这个 message是啥，同样的和 Vue 一样，数据全都存在 data 里，只需要在同目录的 js 文件中配置即可，用法基本和 Vue 一样

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

小程序有个地方和 Vue 里不同，Vue 想要把数据绑定到标签的属性上，需要使用 v-bind 指令，但微信小程序却很执着于插值语法，依旧是双大括号

<view id="{{myid}}"> {{message}} </view>

条件渲染

用法和 Vue 基本相同，区别只是把 v-if 换成 wx:if，v-else-if 换成 wx:elif，v-else 换成 wx:else，除此之外就是莫名的双大括号插值语法

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

微信小程序也有个类似 Vue 中 v-show 的东西，不过这次不叫 wx:show，叫做 hidden，也不知道为啥没用 wx: 开头，用法和 v-show 相同，只不过反一下，它是 true 就 hidden，不过依旧是双大括号插值。。。

列表渲染

列表渲染和 vue 区别多一点，但也差不太多，指令上只是把 v-for 换成了 wx:for，但不像 Vue 一样是在属性里通过 (item, index) in array 这种方式来获取元素和索引的，而是直接在标签里使用 item 和 index

<!--wxml-->
<view wx:for="{{array}}"> {{index}} ---- {{item}} </view>

如果不想使用 item 或 index，想换成自定义的就需要通过 wx:for-item 或 wx:for-index 来修改

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

类似于 Vue ，微信小程序的列表渲染也需要添加 key，这里很奇葩的不需要双大括号就可以绑定数据

具体说明，参考官方的话

wx:key 的值以两种形式提供

  1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
<switch wx:for="{{objectArray}}" wx:key="unique"> {{item.id}} </switch>
<switch wx:for="{{numberArray}}" wx:key="*this"> {{item}} </switch>

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  }
})

事件绑定

微信小程序的事件绑定依旧类似于 Vue ，不过不是 v-on 而是 bind。。。

小程序因为是手机端的，所以没有那些鼠标事件，比如 click 在小程序里就是 tab 事件，就是摸一下就跑，就是原来的鼠标点击，除此之外，小程序绑定事件只能用函数名，不能像 Vue 那样通过括号调用来传参数

<view bindtap="handleTap">
    Click here!
</view>

小程序里也没有事件修饰符，如果要阻止事件冒泡的话，可以把 bind 换成 catch

如果要事件在捕获阶段触发呢，就是使用 capture-bind、capture-catch 关键字，后者将中断捕获阶段和取消冒泡阶段

小程序中，事件触发的函数默认参数同样有个 event，不过如果想获取标签的属性，比如 value 什么的，event.taeget 是无法获取这些属性的。。。在小程序里 event.target 不是触发的元素，而是触发的元素的部分属性，主要是 id 和 一些自定义属性，原生的一些属性一遍是在 event.detail 中

上面提到过小程序里无法直接传参，如果需要传递一些参数就需要通过自定义属性，也就是 data- 开头的属性

自定义属性可以通过 event.target.dataset 获得，还有个类似于 target 的 currentTarget，区别在于 target 是触发事件的对象，currentTarget 是这个函数绑定的当前对象

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})