微信小程序介绍

注册账号

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

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

获取 APPID

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

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

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

开发工具

下载地址

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

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

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

第一个微信小程序

打开微信开发者工具

新建小程序项目

填写项目信息

成功

微信开发者工具介绍

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

小程序结构目录

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

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

官网

小程序文件结构

基本的项目目录

小程序配置文件

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

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

全局配置 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 配置

tabbar 页面底部导航

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index", //跳转的路径
      "text": "首页",  //名称
      "iconPath": "./tabs/tab_home_nor@3x.png",  // 图标
      "selectedIconPath": "./tabs/tab_home_fill@3x.png"  //选中的图标
    },
      {
      "pagePath": "pages/category/index",
      "text": "分类",
      "iconPath": "./tabs/tab_classify_nor.png",
      "selectedIconPath": "./tabs/tab_classify_fill@3x.png"
    },
      {
      "pagePath": "pages/cart/index",
      "text": "购物车",
      "iconPath": "./tabs/tab_cart_nor@3x.png",
      "selectedIconPath": "./tabs/tab_cart_fill@3x.png"
    },
      {
      "pagePath": "pages/user/index",
      "text": "我的",
      "iconPath": "./tabs/tab_my_nor@3x.png",
      "selectedIconPath": "./tabs/tab_my_fill@3x.png"
    }
  ]
  },
复制代码

页面配置 page.json

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

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

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

模板语法

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

数据绑定

普通写法

<view> {{ message }} </view>
复制代码

Page({
  data: {
    message: 'Hello MINA!'
  }
})
复制代码

组件属性

<view id="item-{{id}}"> </view>
复制代码

Page({
  data: {
    id: 0
  }
})
复制代码

bool 类型

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

<checkbox checked="{{false}}"> </checkbox>
复制代码

运算

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>
复制代码

算数运算

<view> {{a + b}} + {{c}} + d </view>
复制代码

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
复制代码

逻辑判断

<view wx:if="{{length > 5}}"> </view>
复制代码

字符串运算

<view>{{"hello" + name}}</view>
复制代码

Page({
  data:{
    name: 'MINA'
  }
})
复制代码

列表渲染

wx:for

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

wx:key 用来提高数组渲染的性能

<view wx:for="{{array}}" wx:key="{{item}}">
  {{index}}: {{item.message}}
</view>
复制代码

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
复制代码

block

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

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
复制代码

条件渲染

wx:if

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

<view wx:if="{{condition}}"> True </view>
复制代码

hidden

<view hidden="{{condition}}"> True </view>
复制代码

类似 wx:if

频繁切换 用 hidden

不常使用 用 wx:if

小程序事件的绑定

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

wxml

<input bindinput="handleInput" />
复制代码

page

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

特别注意

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);
     }
   复制代码

样式 WXSS

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

• 响应式长度单位 rpx
• 样式导入

尺寸单位

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 即可。

样式导入

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

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

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

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}
复制代码

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

选择器

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
复制代码

目前支持的选择器有：

小程序中使用 less

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

1. 编辑器是vscode

2. 安装插件 easy less

   

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

       "less.compile": {
           "outExt":       ".wxss"
       }
   复制代码

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

常见组件

view

代替 原来的 div 标签

  <view hover-class="h-class">
  点击我试试
  </view>
复制代码

text

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

代码

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

image

1. 图片标签，image 组件默认宽度 320px、高度 240px
2. 支持懒加载

mode 有效值：

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

swiper

微信内置轮播图组件

默认宽度 100% 高度 150px

swiper

滑块视图容器。

swiper-item

滑块

默认宽度和高度都是 100%

navigator

导航组件 类似超链接标签

open-type 有效值：

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/head_global_z_@all.png" 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')
  }
})

复制代码

nodes 属性

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

文本节点：type = text

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

button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
  default
</button>
复制代码

size 的合法值

type 的合法值

form-type 的合法值

open-type 的合法值

icon

radio

需要搭配 radio-group 一起使用

checkbox

需要搭配 checkout-group 一起使用

自定义组件

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

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

创建自定义组件

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

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

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

声明组件

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

myHeader.json

{
  "component": true
}
复制代码

编辑组件

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

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

myHeader.wxml

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

复制代码

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

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

myHeader.wxss

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

注册组件

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

myHeader.js

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

声明引入自定义组件

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

index.wxml

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

页面中使用自定义组件

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

其他属性

定义段与示例方法

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

组件-自定义组件传参

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

过程

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');
    }
  }
})
复制代码

小结

1. 标签名 是 中划线的方式
2. 属性的方式 也是要中划线的方式
3. 其他情况可以使用驼峰命名

   1. 组件的文件名如 myHeader.js 的等
   2. 组件内的要接收的属性名 如 innerText
4. 更多。。

小程序生命周期

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

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

应用生命周期

页面生命周期

页面生命周期图解

希望大家看了本篇文章都有收获 ...

关注【前端知识小册】，第一时间获取前端优质文章！