微信小程序入门

1. 引言
2. 构建
3. 基础组件
4. 功能组件
5. 常用代码举例
6. 参考文献

微信小程序，是腾讯结合 微信 sdk 推出的一种微信开发工具。可以使前端开发者调用 微信的 一些内置功能，开发出功能强大的小应用。

作为一个合格的前端开发人员，需要掌握和了解。

下面我们详细的介绍下开发一个微信小程序的步骤

构建

1. 申请小程序账号： 进入 (开发者平台) [https://developers.weixin.qq.com ] 注册小程序账号，获取AppID。
2. AppID 是小程序的 秘钥，通过 这个 id 开发者可以使用微信提供的 相应 sdk功能。
3. 安装开发者工具： 通过官网 下载微信开发者工具，用于开发和调试。
4. 启动微信开发者工具 自动创建一套 目录结构，我们就可以进行开发了。
5. 微信小程序默认的代码结构 包含： JSON 配置 JS 脚本逻辑文件 WXML 模板文件 WXSS 样式文件。标配，不过有些文件格式是可选的。

基础组件

全局配置项

1. app.json : 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。( pages:[] window: {} tabBar: { list: [ ]} networkTimeout:{} debug: true ) 等

2. Pages：这个是编写的js文件，后缀.js这里不需要使用，配置好正确路径即可正常调用（若调用不到，在重启微信开发者工具会直接报 page 错误）。

3. Window：配置顶部的一些样式，文档介绍比较详细。

4. tabBar：底部的几项配置，见名知意。

5. networkTimeout：暂时没发现用处，建议看文档。根据实际项目需求进行添加与更改。

6. iconPath和selectedIconPath：底部菜单按钮图片与得到切换点击高亮。

7. text：可以去掉，全部去掉会发现底部tabar高度会减少很多。

8. 「Color」是底部字体颜色，「selectedColor」是切换到该页面高亮颜色，「borderStyle」是切换菜单上面的一条线的颜色，「backgroundColor」是底部菜单栏背景颜色。文字描述较为抽象，建议你一一调试并查看其效果，加深印象。

9. 「“list”」下的代码顺序必须依次放置，不能随便更改。

10. 「”pagePath”」之后的文件名内，「.wxml」后缀被隐藏起来了，这是微信开发代码中人性化的一点——帮你节约写代码的时间，无须频繁声明文件后缀。

11. 「”iconPath”」为未获得显示页面的图标路径，这两个路径可以直接是网络图标。

12. 「”selectedIconPath”」为当前显示页面高亮图标路径，可以去掉，去掉之后会默认显示为「”iconPath”」的图标。

13. 「”Text”」为页面标题，也可以去掉，去掉之后纯显示图标，如只去掉其中一个，该位置会被占用。

14. project.config.json：工具配置 你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置

 ```
  {
      "pages": [
          "pages/views/mall/mall",
          "pages/index/index",
          "pages/logs/logs",
          "pages/views/common/common"
      ],
      "window": {
          "navigationBarBackgroundColor": "#55e298", # 顶部导航颜色
          "navigationStyle": "custom", # 自定义顶部条可用
          "backgroundTextStyle": "light",
          "backgroundColor": "#f5f7f8",# 页面背景色
          "navigationBarTitleText": "WeChat",
          "navigationBarTextStyle": "black"
      },
      "tabBar": {
          "list": [{
              "pagePath": "pages/views/mall/mall",
              "text": "首页"
          }, {
              "pagePath": "pages/logs/logs",
              "text": "日志"
          }]
      },
      "networkTimeout": {
          "request": 10000,
          "downloadFile": 10000
      },
      "debug": true
  }
 ```

wxml 文件

就是.wxml 定义的文件。微信小程序不支持 html 常用的 如：div 等标签，它通过一套自定义的标签实现了浏览器的dom树结构。我们只需要记住常用的一些标签，就可以完成一个漂亮的小程序页面。（view, button, text）

通常在视图层中我们可以 进行 数据绑定、列表渲染、条件渲染、模板、事件、引用等操作。

数据绑定 {{userInfo.avatarUrl}} 、<image class="widgets__info-img" src="" backgrund-size="cover"/>

列表渲染 wx:for="{{array}}"

条件渲染 wx:if="{{view == 'WEBVIEW'}}" {{viewShow ? 'widgets__info_show' : ''}}

模板 <template is="staffName" data="{{...staffA}}"></template>

事件 <view bindtap="add"> {{count}} </view>

引用 <import src="item.wxml" /> <include src="header.wxml" />

引用

import（动态）

import可以在该文件中使用目标文件定义的template

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

// 使用
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

include（静态）

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置。

<include src="header.wxml"/>

<!-- header.wxml -->
<view> header </view>

wxss文件

1. 新增了尺寸单位。rpx

2. 提供了全局的样式和局部样式。

json文件

设置单独页面的全局样式 通常是："navigationBarTitleText": "获取手机系统信息"

js文件

是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

生命周期 Launch-->App Show-->onload-->onShow-->onReady

1. 使用 Page({ }) 定义方法 ：data: {} onLoad() {} 等 参数
2. 使用 this.setData({ msg: "Hello World" }) 修改页面 {{ msg }} 变量的值 或者 Page 中的 data.msg 值
3. 使用 bindtap="clickMe" 在页面上绑定事件

组件

• 组件引入 <import src="../common/footer.wxml" />
• 组件调用 <template is="header" data="{{title: 'navigateTo/Back, redirectTo'}}"/>
• 自定义组件
  • 组件的事件
  • 组件生命周期
  • 行为
  • 组件之间传参数

页面间跳转

wx.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

wx.navigateTo

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面

wx.redirectTo

关闭当前页面，跳转到应用内的某个页面

wx.navigateTo({url:/pages/text/index?text=${121212}})

wx.redirectTo({url:`/pages/text/index?text=${121212}`})

wx.navigateBack({ delta: 1 })

基础模块

微信提供了一套基础模块模板，他们是 视图、按钮、表单、轮播图、checkbox、icon、image、input、label、mask、modal、navigator picker、progress、radio、slierBar、rich-text 、progress。可以完成常规的页面级需求。

注意事项

1. 不要直接操作this.data,使用this.setData函数，切记、切记
2. wcss 文件里面不能使用本地图片，请使用base64、网上图片或者image
3. 使用sass写wxss文件，在目录下创建index.scss文件，当前目录下执行 sass --watch index.scss:index.wxss --style expanded
4. 事件列表： bindtap bindchange bindfocus
5. Template：定义一个模板，name 模板的名字其实是个作用域。is 和 name 一样，data 是 nameData 传递过来的数据填充。
6. Block：循环控制。
7. 支持自定义属性 data
8. View 里面是一些数据引入，里面是支持三目运算符。
9. 将图片都放到服务器，然后直接采用网络路径。
10. 将图片都转换成 base64 的图片保存，使用时直接引入。
11. images 文件夹 放入到 pages 下面 ，通过 ../../images/icon30_m.png 相对路径引入
12. 转换工具:https://rattenking.gitee.io/stone/demo/imgbase64/imgbase64.html
13. 微信的底部菜单最多支持五栏（五个 icons），所以在你设计微信应用的 UI 和基本架构时就要预先考虑好菜单栏的排布。
14. 文件路由需及时在「app.json」里预先配置好。
15. 引入样式：@import "../common/header/header.wxss"; 在页面跳转之间 template 创建的代码，需要单独引入公共部分样式。（页面嵌套引起的bug）

功能组件

微信还提供了一套结合 sdk 的功能模块。

• 文件下载

  • 设置页面头部

    • wx.setNavigationBarTitle({ title: 标题 })

  • 检查网络连接

  • request 发送数据请求

  • 上传文件

  • webSocket服务

  • 音频

  • 背景音频

  • 相机

    • wx.chooseImage({sourceType,sizeType,count,succ, fail})

  • 字体

  • 图片预览

  • 录音

  • 实时音频传送

  • 视频

  • 文件处理

    • wx.saveFile({ tempFilePath, succ,fail})

  • 数据缓存

  • 下拉数据刷新

    • wx.stopPullDownRefresh({
      • complete: function (res) {
        • console.log(res, new Date())
      • }
    • })

  • 位置监控

    • wx.getLocation( { succ, fail })
    • wx.openLocation({
      • longitude: Number(value.longitude),
      • latitude: Number(value.latitude),
      • name: value.name,
      • address: value.address
    • })

  • 电量监控

  • 加速计

  • 蓝牙检测

  • 剪切板

  • 罗盘

  • 联系人列表

  • 设备方向

  • 拨打电话

  • 扫码

    • wx.chooseImage({count:1, sizeType: ['original','compressed'], sourceType:['album','camera'], success:function(res) {}})

  • 屏幕信息

  • 震动检测

  • Wifi 检测

  • 登录信息

    • wx.login({ succ, fail });

  • 小程序之间跳转

    • 跳转新页面：wx.navigateTo({ url: './navigator' })
    • 返回上一页：wx.navigateBack()
    • 在当前页面打开：wx.redirectTo({ url: './navigator' })

  • 支付跳转

  • 附近小程序

  • 系统信息

    • wx.getSystemInfo({ succ, fail });

常用代码举例

// wxml
<view style="display:{{show}}">{{text}}</view>
<text class="title">我的金币(枚) <label>88</label></text>
<image src="{{item.url == null ? 'images/thum.png': item.url}}" background-size="cover"></image>

<button bindtap="change" data-test="哈哈">点击更改上面文字</button>

// 循环
<view wx:for-items="{{}}" wx:for-item="card" wx:for-index="ci"></view>
// js
Page({
  data: {
    text: "测试"
  },
  onLoad() {
    console.log("hello test")
    console.log(this.data.text);
  },
  bindButtonTapSheet:function(e){
    //调取底部下拉菜单栏
  },
  change(e) {
    this.setData({
      text:e.currentTarget.dataset.test
    })
  }
});

  <view id="view" class="widgets__info {{viewShow ? 'widgets__info_show' : ''}}" bindtap="widgetsToggle">
      <text class="widgets__info-name">内容分区</text>
      <image class="widgets__info-img" src="" backgrund-size="cover"/>
</view>

<navigator url="widgets/wx-view/wx-view" redirect hover-class="className" class="widget">
    <text class="widgets__name"> view </text>
    <view class="widget__line"></view>
</navigator>

wx.showModal({
title: '提示',
content: wx.getStorageSync('title')
})

参考文献

1. https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/import.html