一、微信小程序简介

1、

微信小程序

，小程序的一种，英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用，它实现了应用触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

2、微信小程序，之前叫

应用号

，2017年正式上线

3、

学习微信小程序之前，强烈建议先学习vue.js，学了之后再学超级快

4、微信小程序优点：

• 微信有海量用户,且粘性很高，在微信里开发产品更容易触达用户
• 推广app或公众号的成本太高
• 开发适配成本低
• 容易小规模试错,然后快速迭代
• 跨平台

二、微信小程序环境准备

2.1 申请帐号

1. 进入
   
   小程序注册页
   
   根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号
2. 你也可以管理你的小程序的权限，查看数据报表，发布小程序等操作。通过登录
   
   小程序后台
   
   ，可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 （记得保密）

2.2 安装开发工具

前往

小程序开发工具下载页面

，根据自己的操作系统下载对应的安装包进行安装

2.3 编译预览

这里推荐用vs code编辑，小程序开发工具预览

vscode 小程序开发插件

（一）minapp。支持微信小程序标签、属性的智能补全，并且提示中包含文档内容（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）。

（二）wechat-snippet。这个插件主要的功能就是代码辅助，代码片段自动完成，可以作为上个插件的补充。

（三）wxml。这款插件用于将wxml代码进行高亮显示，并且提供代码格式化的功能，可将代码格式化为较易阅读的样式。

（四）vscode weapp api 。js中的api提示

三、小程序代码构成

通过开发者工具快速创建了一个

QuickStart

项目，里面有以下不同类型文件：

• .json 后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件
• .wxss 后缀的 WXSS 样式文件
• .js 后缀的 JS 脚本逻辑文件

四、JSON配置

配置相关的为.json文件，需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错

4.1

小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{
  "pages":[//页面路由，在这里添加路由可以自动生成对应文件
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo01/demo01"
  ],
  "window":{//定义小程序所有页面的顶部背景颜色，文字颜色定义等
  	//下拉 loading 的样式，仅支持 dark / light
    "backgroundTextStyle":"light",
    //导航栏的样式
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4.2

工具配置 project.config.json

个性化配置，例如界面颜色、编译配置等等，避免了当你换另外一台电脑重新安装工具的时候再重新配置。

4.3

页面配置 page.json

表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置，可对每个页面进行单独配置

4.4

sitemap 配置-了解即可

⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引

五、

模板WXML

1. 标签名字有点不一样

2. 多了一些 wx:if 这样的属性（界面及状态的控制）以及 {
   
   { }} 这样的表达式（数据绑定）

3. MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离
   
   WXML是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构

5.1 数据绑定

（一）普通写法

index.wxml

<view> {{ message }} </view>

index.js

Page({
  data: {
    message: 'Hello MINA!'
  }
})

（二）组件属性

index.wxml

<view id="item-{{id}}"> </view>

index.js

Page({
  data: {
    id: 0
  }
})

（三）bool类型

不要直接写 checked=“false”，其计算结果是⼀个字符串

<checkbox checked="{{false}}"> </checkbox>

5.2 运算

（一）三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

（二）if 逻辑判断

<view wx:if="{{length > 5}}"> </view>

注意：花括号和引号之间如果有空格，将最终被解析成为字符串，切记不要留有空格

5.3 列表渲染

（一）wx:for

• 项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名
• 下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名
• wx:key ⽤来提⾼数组渲染的性能
• wx:key 绑定的值 有如下选择：
• 1. string 类型，表⽰循环项中的唯⼀属性 如

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
 
wx:key="id"

• 2. 保留字 *this ，它的意思是 item 本⾝ ，*this 代表的必须是 唯⼀的字符串和数组。

list:[1,2,3,4,5]
 
wx:key="*this"

代码：

<view wx:for="{{array}}" wx:key="id">
  {{index}}: {{item.message}}
</view>

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

（二）block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

5.4 条件渲染

（一）wx:if

在框架中，使⽤ wx:if=”{

{condition}}” 来判断是否需要渲染该代码块：

  <view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>

（二）hidden（类似 wx:if）

<view hidden="{{condition}}"> True </view>

频繁切换 ⽤ hidden

不常使⽤ ⽤ wx:if

5.5 事件绑定

⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等

代码：

<!-- 1.需要给input标签绑定 input事件
绑定关键字 bindinput
2.如何获取输入框的值
通过事件源对象获取e.detail.value
3.把输入框的值赋值到data中
错误：this.data.num = e.detail.value
正确：
this.setData({
  num: e.detail.value
})
4.需要加入一个点击事件
      bindtab
      无法在小程序中的事件直接传参
      通过自定义属性的方式传递参数
      事件源中获取自定义属性 -->

<input type="text" bindinput="handleInput"/>
<button bindtab="handleTab" data-operation="{{1}}">+</button>
<button bindtab="handleTab" data-operation="{{-1}}">-</button>
<view>{{num}}</view>

Page({
  data: {
    num: '0'
  },
  handleInput(e) {
    // 绑定的事件
    console.log(e)
    console.log(e.detail.value);
    this.setData({
      num: e.detail.value
    })
  },
  // 加减按钮事件
  handleTab(e) {
    console.log(e);
    // 获取自定义属性operation
    const operation = e.currentTarget.dataset.operation
    this.setData({
      num: this.data.num + operation
    })
  }
})

六、样式 WXSS

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。

与 CSS 相⽐，WXSS 扩展的特性有：

• 响应式⻓度单位 rpx
• 样式导⼊

6.1 尺寸单位

（1）rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像

素 ， 1rpx = 0.5px = 1物理像素

（2）建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准

（3）使⽤步骤：

1. 确定设计稿宽度 pageWidth
2. 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
3. 在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。
4. 代码写法

/* width: 200rpx; */
width: calc(700rpx*100/375);

6.2 样式导⼊

• wxss中直接就⽀持，样式导⼊功能。
• 也可以和 less中的导⼊混⽤。
• 使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
  color:red;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
  color:blue;
}

6.3 选择器

特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

⽬前⽀持的选择器有：

6.4 ⼩程序中使⽤less

（1）原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都⽀持，如 wepy ， mpvue ， taro 等。

（2）但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现

1. 编辑器是 vscode
2. 安装插件 easy less
3. 在vs code的设置中加⼊如下配置：

 "less.compile": {
        "outExt":       ".wxss"
    }

4. 在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。 会自动转换为 wxss代码的文件

七、 常见组件

重点讲解⼩程序中常⽤的布局组件

view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox 等

7.1

view

代替 原来的 div 标签

 <view hover-class="h-class">
  点击我试试
  </view>

7.2

text

1. ⽂本标签
2. 只能嵌套text
3. ⻓按⽂字可以复制（只有该标签有这个功能）
4. 可以对空格 回⻋ 进⾏编码

代码:

<text selectable="{{false}}" decode="{{false}}">
	普&nbsp;通&lt;
</text>

7.3

image

1. 图⽚标签，image组件默认宽度320px、⾼度240px
2. ⽀持懒加载

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

7.4

Swiper轮播图

swiper标签：滑块视图容器

swiper-item标签：滑块，默认宽度和⾼度都是100%

示例代码：

<swiper autoplay="true" interval="2000" circular="true" indicator-dots="true" indicator-color="#0094ff" indicator-active-color="##ff0094">
  <swiper-item>
    <image src="//gw.alicdn.com/imgextra/i3/121/O1CN01d4N6Pw1ClSXpSiESc_!!121-0-lubanu.jpg"/>
  </swiper-item>
  <swiper-item>
    <image src="//gw.alicdn.com/imgextra/i1/198/O1CN01snMZj51DKj2eIkiDC_!!198-0-lubanu.jpg"/>
  </swiper-item>
  <swiper-item>
    <image src="https://img.alicdn.com/tps/i4/https://img.alicdn.com/tps/i4//TB1cZkvTeH2gK0jSZJnSuuT1FXa.jpg"/>
  </swiper-item>
</swiper>

swiper {
  width: 100%;
  height: calc(100vw*352/1125);
  /* height: 31.28vw; */
}
image {
  width: 100%;
}

7.5

navigator导航栏

• 导航组件，类似超链接标签
• 块级元素，默认会换行，可直接加宽度和高度

open-type属性有效值：

代码示例：

<text>pages/search/search.wxml</text>
<navigator url="/pages/logs/logs">日志页面</navigator>
<navigator url="/pages/index/index">跳转tabbar页面</navigator>
<navigator open-type="redirect" url="/pages/logs/logs">日志页面 redirect</navigator>
<navigator open-type="switchTab" url="/pages/index/index">switchTab 跳转到tabbar页面</navigator>
<navigator open-type="reLaunch" url="/pages/img/img">reLaunch 可以随便跳</navigator>

7.6 rich-text

富文本标签：可以将字符串解析成对应标签，类似 vue中

v-html

功能

代码示例：

<!-- 显示斜体hello world -->
<rich-text nodes="<i> hello world </i>"></rich-text>

nodes属性


nodes 属性⽀持 字符串 和 标签节点数组

⽂本节点：type = text

• nodes 不推荐使⽤ String 类型，性能会有所下降。
• rich-text 组件内屏蔽所有节点的事件。
• attrs 属性不⽀持 id ，⽀持 class 。
• name 属性⼤⼩写不敏感。
• 如果使⽤了不受信任的 HTML 节点，该节点及其所有⼦节点将会被移除。
• img 标签仅⽀持⽹络图⽚

7.7

button

open-type 的合法值

open-type 的 contact的实现流程

1. 将⼩程序 的 appid 由测试号改为 ⾃⼰的 appid
2. 登录微信⼩程序官⽹，添加
   
   客服 – 微信
3. 为了⽅便演⽰，⽼师⾃⼰准备了两个账号（一）普通⽤⼾ A（二）客服-微信 B

代码示例：

<!-- search.wxml -->
<button type="warn" size="mini" loading="true" plain="true">
  default
</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取用户手机号</button>

// pages/search/search.js
Page({
  getPhoneNumber(e) {
    console.log(e);
  }
})

7.8

icon

代码示例：

<!-- search.wxml -->
<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>
 
<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>
 
<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

// pages/search/search.js
Page({
  data: {
   iconSize: [20, 30, 40, 50, 60, 70],
   iconType: [
     'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 
'download', 'search', 'clear'
   ],
   iconColor: [
     'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
  }
})

7.9

radio

• 可以通过 color属性来修改颜色
• 需要搭配 radio-group ⼀起使⽤

代码示例：

<radio-group bindchange="handleChange">
  <radio color="red" value="male">男</radio>
  <radio color="red" value="female">女</radio>
</radio-group>
<view>单选框选中的是{{gender}}</view>

Page({
  data() {
    gender: ''
  },
  handleChange(e) {
    console.log(e);
    let gender = e.detail.value
    this.setData({
      // gender:gender
      gender
    })
  }
})

7.10

checkbox

• 可以通过 color属性来修改颜色
• 需要搭配 checkbox-group ⼀起使⽤

<checkbox-group bindchange="handleItemChange">
  <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
<view>选中的水果有{{checkedList}}</view>

Page({
  data: {
    list:[
      {id:0,name:"苹果",value:"apple"},
      {id:1,name:"葡萄",value:"grape"},
      {id:2,name:"香蕉",value:"banana"},
    ],
    checkedList: ''
  },
  handleItemChange(e) {
    console.log(e);
    const checkedList = e.detail.value
    this.setData({
      checkedList
    })
  }
})

八、自定义组件

类似vue或者react中的自定义组件

8.1 创建自定义组件

创建文件夹components文件夹之后，在创建一个组件的文件夹，然后右击tabs文件夹创建components组件就会生成如下代码结构：



例如要引用到某个页面中，代码如下：

{
  "usingComponents": {
    "tabs": "../../components/tabs/Tabs"
  }
}

<tabs></tabs>

8.2 组件构造器（Tabs.js）

Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法等。

8.3 组件、自定义组件传参

子组件

<!--components/Tabs/Tabs.wxml-->
<text>components/Tabs/Tabs.wxml</text>

 <view class="tabs">
  <view class="tabs_title">
    <view class="title_item {{item.isActive ? 'active':''}}" wx:for="{{tabs}}" wx:key="id"
          bindtap="handleItemTab" data-index="{{index}}">
      {{item.name}}
    </view>
  </view>
  
  <view class="tabs_content">
    <slot></slot>
  </view>
 </view>

// components/Tabs/Tabs.js
Component({
  properties: {
    tabs: {
      type: Array,
      value: []
    }
  },

//   1页面.js文件中存放事件回调函数的时候存放在data同层级下!
//   2组件.js文件中存放事件回调函数的时候必须要存在在methods中!
  methods:{
    handleItemTab(e) {
      // 1绑定点击事件 需要在methods中绑定
      // 2获取被点击的索引，通过事件传参
      // 3获取原数组
      // 4对数组循环
      //      1给每一个循环性选中属性改为false
      //      2给当前的索引的项添加激活选中效果就可以了
      // console.log(e);
      const {index} = e.currentTarget.dataset //es6 语法解构赋值，严谨写法，先复制一份数据，保持原有数据不变
      // 5触发父组件的自定义事件，同时将子组件数据传递给父组件
      this.triggerEvent('itemChange',{index})
    }
  }
})

/* components/Tabs/Tabs.wxss */
.tabs {

}
.tabs_title{
  display: flex;
  padding: 10rpx 0;
}
.title_item{
  flex: 1;
  /* justify-content: center; */
  /* display: flex; */
  /* align-items: center; */
  text-align: center;
}
.active{
  color: red;
  border-bottom: 5rpx solid currentColor;
}
.tabs_content{
  margin-top: 100rpx;
}

父组件

<!-- 这里子向父传递数据，通过事件方式，在子组件的标签加bind+事件名称="",别忘了加bind -->
<tabs tabs="{{tabs}}" binditemChange="handleItemChange1">
  <block wx:if="{{tabs[0].isActive}}">首页</block>
  <block wx:elif="{{tabs[1].isActive}}">原创</block>
  <block wx:elif="{{tabs[2].isActive}}">分类</block>
  <block wx:else>关于</block>
</tabs>

// pages/mine/mine.js
Page({
  data: {
    tabs: [
      {id:0, name:"首页", isActive:true},
      {id:1, name:"原创", isActive:false},
      {id:2, name:"分类", isActive:false},
      {id:3, name:"关于", isActive:false},
    ]
  },
  handleItemChange1(e) {
    // console.log(e);
    const {index} = e.detail
    let {tabs} =this.data
    // [].forEach遍历数组遍历数组的时候修改了v，也会导致源数组被修改
    tabs.forEach((v,i) => i===index?v.isActive=true:v.isActive=false);

    this.setData({
      tabs
    })
  }
})

实现的需求：

九、小程序生命周期

9.1 应用生命周期

//app.js
App({
  // 1 应用第一次启动的就会触发的事件
  onLaunch() {
  // 在应用第一次启动的时候获取用户的个人信息
    console.log("onLaunch")
    // js的方式来跳转
    // wx.navigateTo({
    //   url: '/11/22/33'
    // })
  },
  // 2 应用被用户看到
  onShow(){
  //对应用的数据或者页面效果重置
    console.log ("onShow")
  },
  // 3 应用被隐藏了
  onHide(){
  //暂停或者清除定时器
    console.log("Hide");
  },
  // 4 应用的代码发生了报错的时候就会触发
  onError(err){
    //在应用发生代码报错的时候，收集用户的错误信息，通过异步请求将错误的信息发送后台去
    console.log("onError")
    console.log (err)
  },
    // 5 页面找不到就会触发
    // 应用第一 次启动的时候，如果找不到第一个入口页面 才会触发
  onPageNotFound(){
    //如果页面不存在了通过js的方式来重新跳转页面重新跳到第二个首页
    //不能跳到tabbar页面导航组件类似
    wx.navigateTo({ 
      url: '/pages/logs/logs'
    });
    console.log('onPageNotFound');
  },
})

9.2 页面生命周期

// pages/search/search.js
Page({
  data: {
   iconSize: [20, 30, 40, 50, 60, 70]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // onLoad发送异步请求来初始化页面数据
    console.log("onLoad"); 
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log('onReady');
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('onShow');
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('onHide');
  },
  /**
   * 生命周期函数--监听页面卸载，也可以通过点击超链接来演示
   */
  onUnload: function () {
    console.log('onUnload');
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("onPullDownRefresh");
    // 页面的数据或者效果重新刷新
  },
  /**
   * 页面上拉触底事件的处理函数，需要让页面出现上下滚动才行
   */
  onReachBottom: function () {
    // 上拉加载下一页数据
    console.log('onReachBottom');
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log('onShareAppMessage');
  },
  /**
  * 页面滚动就可以触发
  */
  onPageScroll(){
    console.log('onPageScroll');
  },
  /**
  * 页面的尺寸发生改变的时候触发
  * 小程序发生了横屏竖屏切换的时候触发，需要在search.json界面添加如下代码
  * {
  "pageOrientation": "auto"
}
  */
  onResize() {
    console.log('onResize');
  },
  /** 
   * 1 必须要求当前页面也是tabbar页面
   * 2 点击的自己的tab item的时候才触发 
  */
  onTabItemTap() {
    console.log('onTabItemTap');
  }
})

9.3 页面生命周期图解