微信小程序学习笔记(一)

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

项目结构

了解项目结构前,需要知道微信小程序有 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-bindcapture-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 // 大写会转为小写
  }
})