微信小程序开发学习记录

# 前言

第一次看微信小程序开发文档，打开微信开发者工具，看着配置文件一脸懵，尝试修改，报错(卒)。
第二次打开微信开发者工具，整理思绪，耐心学习，现在把已知的知识点记录下来(戴着耳机播放音乐屏蔽掉外界声音的干扰真的好很多)。

# 注册账号

注册地址：微信公众平台
注册步骤教程：申请账号

# 下载微信开发者工具

下载地址：微信开发者工具

下载最新稳定版，根据你的系统来下载

# 了解目录结构

├── pages  ===> 路由文件夹
│   ├── index  ===> 路由名称(index)
│   │   ├── index.js  ===> js(仅用于 index)
│   │   ├── index.json  ===> 页面配置(仅用于 index)
│   │   ├── index.wxml  ===> html(仅用于 index)
│   │   └── index.wxss  ===> css(仅用于 index)
│   └── logs  ===> 同上
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
└── utils  ===> 工具js
    └── util.js
├── app.js  ===> 全局公共js
├── app.json  ===> 全局公共配置
├── app.wxss  ===> 全局公共css
├── project.config.json  ===> 项目配置文件
├── sitemap.json  ===> 配置小程序及其页面是否允许被微信索引

不要着急去想看懂代码，先了解项目结构

# 疑惑1

这个是微信小程序告诉你，这个页面可以被微信访问，可以选择关闭显示。

# 小程序全局的三个文件

• app.js
• app.json
• app.wxss

# app.js

// app.js
App({
  onLaunch (options) {
    // 在启动时做一些初始的事情。
  },
  onShow (options) {
    // 页面出现在前台时做点什么。
  },
  onHide () {
    // 页面从前台变为后台时候做点什么。
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

app.js官方文档

# app.json

{
  "pages":[  ===> 路由列表
    "pages/index/index",  ===> 第一个路由就是进来小程序的第一个页面
    "pages/logs/logs"  ===> 第二个路由
  ],
  "window":{  ===> 全局的默认窗口表现
    "backgroundTextStyle":"light",  ===> 下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#fff",  ===> 导航栏背景颜色，如 #000000
    "navigationBarTitleText": "Weixin",  ===> 导航栏标题文字内容
    "navigationBarTextStyle":"black"  ===> 导航栏标题颜色，仅支持 black / white
  },
  "tabBar":{  ===> 底部 tab 栏
    "color": "#000000",  ===> tab 上的文字默认颜色，仅支持十六进制颜色
    "selectedColor": "#e1403a",  ===> tab 上的文字选中时的颜色，仅支持十六进制颜色
    "backgroundColor": "#ffffff",  ===> tab 的背景色，仅支持十六进制颜色
    "list": [{  ===> tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
      "pagePath": "pages/index/index",  ===> 页面路径，必须在 pages 中先定义
      "text": "首页",  ===> 	tab 上按钮文字
      "iconPath": "",  ===> 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
      "selectedIconPath": ""  ===> 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
    }, {
      "pagePath": "pages/logs/logs",  ===> 同上
      "text": "日志",
      "iconPath": "",
      "selectedIconPath": ""
    }]
  },
  "networkTimeout": {  ===> 网络超时时间
    "request": 10000,  ===> wx.request 的超时时间，单位：毫秒。
    "downloadFile": 10000  ===> 
  },
  "style": "v2",  ===> 指定升级后的 weui 样式
  "sitemapLocation": "sitemap.json"  ===> wx.downloadFile 的超时时间，单位：毫秒。
}

app.json官方文档

# app.wxss

app.wxss官方文档

# 小程序页面的四个文件

• js
• json
• wxml
• wxss

# js (页面逻辑)

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this.setData 回调
    })
  }
})

详细的参数含义和使用请参考 Page 参考文档 。

获取data的值: console.log(this.data.text);

设置data的值: this.setData({ text : ‘dome’ })

调用方法: this.viewTap();

# json

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

{
  "navigationBarBackgroundColor": "#ffffff",  ===> 导航栏背景颜色，如 #000000
  "navigationBarTextStyle": "black",  ===> 导航栏标题颜色，仅支持 black / white
  "navigationBarTitleText": "微信接口功能演示",  ===> 导航栏标题文字内容	
  "backgroundColor": "#eeeeee",  ===> 窗口的背景色
  "backgroundTextStyle": "light"  ===> 下拉 loading 的样式，仅支持 dark / light
}

完整配置项说明请参考 小程序页面配置

# wxml

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合 基础组件、事件系统，可以构建出页面的结构。

数据绑定

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

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

列表渲染

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

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

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

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

条件渲染

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

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

# wxss

app.wxss官方文档

# 微信开发者工具快捷键

微信开发者快捷键官方文档