微信小程序入门到实战(1)-基础知识

 1.微信小程序介绍

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

1.1. 为什么是微信小程序 ？

1. 微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户；

2. 推广app 或公众号的成本太高。

3. 开发适配成本低。

4. 容易小规模试错，然后快速迭代。

5. 跨平台。

 

1.2. 微信小程序历史

• 2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」 需要注意的是，之前是叫做 应用号

• 2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供小程序在云端服务器的技术方案。

• 2017年1月9日，微信推出的“小程序”正式上线。“小程序”是一种无需安装，即可使用的手机“应用”。不需要像往常一样下载App，用户在微信中“用完即走”。

 

1.3. 疯狂的微信小程序

1. 微信月活已经达到10.82亿。其中55岁以上的用户也达到6300万

2. 信息传达数达到450亿，较去年增长18%;视频通话4.1亿次,增长100%

3. 小程序覆盖超过200+行业，交易额增长超过6倍，服务1000亿+人次,创造出了5000亿+的商业价值

 

1.4. 还有其他的小程序 不容忽视

1. 支付宝小程序

2. 百度小程序

3. QQ小程序

4. 今日头条 + 抖音小程序

 

1.5. 体验

1.5.1. 官方微信小程序体验

小程序示例源码

 

1.5.2. 其他优秀的第三方小程序

• 拼多多

• 滴滴出行

• 欢乐斗地主

• 智行火车票

• 唯品会

• 。。。

 

2. 环境准备

开发微信小程序之前，必须要准备好相应的环境

2.1. 注册账号

建议使用全新的邮箱，没有注册过其他小程序或者公众号的。

访问注册页面，耐心完成注册即可。

2.2. 获取APPID

由于后期调用微信小程序的接口等功能，需要索取开发者的小程序中的APPID，所以在注册成功后，可登录，然后获取APPID。

登录，成功后可看到如下界面

然后复制你的APPID,悄悄的保存起来，不要给别人看到。

 

2.3. 开发工具

下载地址

微信小程序自带开发者工具，集 开发 预览 调试 发布 于一身的 完整环境。

但是由于编码的体验不算好，因此 建议使用 vs code + 微信小程序编辑工具 来实现编码

vs code 负责敲代码，微信编辑工具 负责预览。

 

3. 第一个微信小程序

3.1. 打开微信开发者工具

注意 第一次登录的时候 需要扫码登录

3.2. 新建小程序项目

3.3. 填写项目信息

3.4. 成功

 

4. 微信开发者工具介绍

详细的使用，可以查看官网

 

5. 小程序结构目录

小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

小程序框架提供了自己的视图层描述语言 WXML 和 WXSS，以及 JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

5.1. 小程序文件结构和传统web对比

 

通过以上对比得出，传统web 是三层结构。而微信小程序 是四层结构，多了一层 配置.json

5.2. 基本的项目目录

 

6. 小程序配置文件

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json

 注意：配置文件中不能出现注释。

6.1. 全局配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json 配置。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

字段的含义

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

3. 完整的配置信息请参考 app.json配置

6.1.1. tabbar

6.2. 页面配置 page.json

这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。

开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

 

6.3.sitemap 配置-了解即可

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引。

 

7. 模板语法

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

7.1. 数据绑定

7.1.1. 普通写法

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

 

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

 

7.1.2. 组件属性

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

 

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

 

7.1.3. bool类型

不要直接写 checked="false"，其计算结果是一个字符串

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

 

7.2. 运算

7.2.1. 三元运算

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

 

7.2.2. 算数运算

<view> {{a + b}} + {{c}} + d </view>

 

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

 

7.2.3. 逻辑判断

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

 

7.2.4. 字符串运算

<view>{{"hello" + name}}</view>

 

Page({
  data:{
    name: 'MINA'
  }
})

 

7.2.5. 注意

花括号和引号之间如果有空格，将最终被解析成为字符串

 

7.3. 列表渲染

7.3.1. 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'
    }]
  }
})

 

7.3.2. block

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

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

 

7.4. 条件渲染

7.4.1. wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

 

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

7.4.2. hidden

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

类似 wx:if

频繁切换 用 hidden

不常使用 用 wx:if

 

8. 小程序事件的绑定

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

不同的组件支持不同的事件，具体看组件的说明即可。

8.1. wxml

<input bindinput="handleInput" />

8.2. page

Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
  }
})

8.3. 特别注意

1.绑定事件时不能带参数 不能带括号 以下为错误写法

<input bindinput="handleInput(100)" />

2.事件传值 通过标签自定义属性的方式 和 value

<input bindinput="handleInput" data-item="100" />

3.事件触发时获取数据

  handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // 输入框的值
   console.log(e.detail.value);
  }

 

9. 样式 WXSS

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

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

• 响应式长度单位 rpx

• 样式导入

9.1. 尺寸单位

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

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

使用步骤：

1. 确定设计稿宽度 pageWidth

2. 计算比例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth。

3. 在less文件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

9.2. 样式导入

wxss中直接就支持，样式导入功能。

也可以和 less中的导入混用。

使用@import语句可以导入外联样式表，只支持相对路径。

示例代码：

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

 

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

 

9.3. 选择器

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

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

目前支持的选择器有：

9.4. 小程序中使用less

原生小程序不支持less，其他基于小程序的框架大体都支持，如wepy，mpvue，taro等。但是仅仅因为一个less功能，而去引入一个框架，肯定是不可取的。因此可以用以下方式来实现。

1. 编辑器是vscode

2. 安装插件 easy less

3. 在vs code的设置中加入如下，配置

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

 

在要编写样式的地方，新建 less文件，如 index.less,然后正常编辑即可。

 

10. 常见组件

https://developers.weixin.qq.com/miniprogram/dev/component/

重点讲解小程序中常用的布局组件 view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox等

10.1. view

代替 原来的 div 标签

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

10.2. text

1. 文本标签

2. 只能嵌套text

3. 长按文字可以复制（只有该标签有这个功能）

4. 可以对空格 回车 进行编码

10.2.1. 代码

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

10.3. image

1. 图片标签，image组件默认宽度320px、高度240px

2. 支持懒加载

 

mode 有效值：

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

10.4.swiper

微信内置轮播图组件

 

默认宽度 100% 高度 150px

10.4.1. swiper

 滑块视图容器。

10.4.2. swiper-item

滑块，默认宽度和高度都是100%

10.5. navigator

 导航组件 类似超链接标签

open-type 有效值：

10.6. rich-text

富文本标签

可以将字符串解析成 对应标签，类似 vue中 v-html功能

 

代码

// 1   index.wxml  加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/[e-mail]" alt="">'></rich-text> 
 
    
// index.js
    
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

10.6.1. nodes属性

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

文本节点：type = text

• nodes 不推荐使用 String 类型，性能会有所下降。

• rich-text 组件内屏蔽所有节点的事件。

• attrs 属性不支持 id ，支持 class 。

• name 属性大小写不敏感。

• 如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。

• img 标签仅支持网络图片。

10.7. button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
  default
</button>

 

 size 的合法值

type 的合法值

form-type 的合法值

open-type 的合法值

open-type 的 contact的实现流程

1. 将小程序 的appid 由测试号改为 自己的appid

2. 登录微信小程序官网，添加 客服 - 微信

3. 为了方便演示，我自己准备了两个账号

   1. 普通用户 A

   2. 客服-微信 B

4. 就是干！

10.8. icon

 

 

 代码:

 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'
    ],
  }
})

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>

 

10.9. radio

可以通过 color属性来修改颜色

需要搭配 radio-group 一起使用

10.10. checkbox

可以通过 color属性来修改颜色

需要搭配 checkbox-group 一起使用

 

11. 自定义组件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

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

小程序允许我们使用自定义组件的方式来构建页面。

11.1. 创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成.

可以在微信开发者工具中快速创建组件的文件结构

 

 

在文件夹内components/myHeader，创建组件 名为 myHeader

11.1.1. 声明组件

首先需要在组件的 json 文件中进行自定义组件声明

myHeader.json

{
  "component": true
}

11.1.2. 编辑组件

同时，还要在组件的 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式。

slot表示插槽，类似vue中的slot

myHeader.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
    <slot></slot>
</view>

在组件的 wxss文件中编写样式

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

myHeader.wxss

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

11.1.3. 注册组件

在组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法

 

myHeader.js

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      // 期望要的数据是 string类型
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

11.2. 声明引入自定义组件

首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径。

index.wxml

{
    // 引用声明
  "usingComponents": {
      // 要使用的组件的名称     // 组件的路径
    "my-header":"/components/myHeader/myHeader"
  }
}

11.3. 页面中使用自定义组件

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-header inner-text="Some text">
    <view>用来替代slot的</view>
    </my-header>
</view>

11.4. 定义段与示例方法

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

11.5. 组件-自定义组件传参

1. 父组件通过属性的方式给子组件传递参数

2. 子组件通过事件的方式向父组件传递参数

11.5.1. 过程

1. 父组件 把数据 {{tabs}} 传递到 子组件的 tabItems 属性中

2. 父组件 监听 onMyTab 事件

3. 子组件 触发 bindmytap 中的 mytap 事件

   1. 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象

4. 父 -> 子 动态传值 this.selectComponent("#tabs");

 父组件代码

// page.wxml 

<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
  内容-这里可以放插槽
</tabs>

// page.js
  data: {
    tabs:[
      {name:"体验问题"},
      {name:"商品、商家投诉"}
    ]
  },
  onMyTab(e){
    console.log(e.detail);
  },

子组件代码

// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>

// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemActive(e){
      this.triggerEvent('mytap','haha');
    }
  }
})

11.6. 小结

1. 标签名 是 中划线的方式

2. 属性的方式 也是要中划线的方式

3. 其他情况可以使用驼峰命名

   1. 组件的文件名如 myHeader.js 的等

   2. 组件内的要接收的属性名 如 innerText

4. 更多。。

 

12. 小程序生命周期

分为应用生命周期和页面生命周期

 

关于小程序前后台的定义和小程序的运行机制，请参考运行机制章节。

12.1. 应用生命周期

12.2. 页面生命周期

12.3. 页面生命周期图解