微信小程序 基础

1 - 环境准备

1) 注册账号

注册界面

2) 获取 APPID

期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，以在注册成功后， 可登录，然后获取 APPID

3) 开发⼯具

2 - ⼩程序结构⽬录

传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json

基本的项⽬⽬录

image-20200902135452798

3 - ⼩程序配置⽂件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的 page.json

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

3.1 全局配置 app.json

全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底 部 tab 等,普通快速启动项⽬⾥边的 app.json 配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

字段的含义

1.pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序
⻚⾯定义在哪个⽬录。

新增页面：可以在当前字段设置页面路径，保存之后，开发者工具自动在 pages 文件下新建页面。如果把该路径放在 pages 字段的第一行，默认就会打开这个页面

2.window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

backgroundTextStyle 是下拉刷新是字体的颜色，navigationBarTextStyle，只有黑色和白色两个选项。

有的配置仅看字面意思无法判断是什么，还是查看文档。当配置之后没有预期的效果，注意查看 console 控制台；微信开发者工具适合编写配置文件，不仅会有字段提示，而且可以实现上面的新增页面效果。

3.更多配置信息

tabBar 配置

tabBar 的结构在 tabBar字段 配置，item 放在 list 数组里面，至少有两个 item。其他样式配置见文档。

image-20200902151400620

3.2 ⻚⾯配置 page.json

详见页面配置

navigationBarTextStyle 字段只能是 white 或者 black ，连16进制的黑白也不可以。⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json 的 window 中相同的配置项。

1
2
3
4
5
6
7
{
  "usingComponents": {
  },
  "navigationBarBackgroundColor": "#009fee",
  "navigationBarTitleText": "Demo-01",
  "navigationBarTextStyle": "white"
}

usingComponents 是自己定义的一些通用配置

3.3 sitemap 配置

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

4 - 模板语法

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

每个页面下的 js 文件里面包括一个 Page 对象，对象里 data 是页面的变量，其他都是一些生命周期函数。

text标签相当于 html 中的 span 标签，行内元素；view标签相当于 html 中的 div 标签，块级元素。checkbox就相当于类型为 checkbox 的 input 复选框。

4.1 数据绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 数据绑定 -->
<view>{{meg}}</view>
<view>
 姓名 ：<text>{{Person.name}}</text>  年龄 ：<text>{{Person.age}}</text>
</view>

<!-- 在标签的属性中使用 数据 -->
<view data-num="{{num}}">自定义属性</view>

<!-- 使用 boolean 类型充当属性 checked -->
<view>
 是否选中： <checkbox checked='{{isChecked}}'></checkbox>
</view>

4.2 运算

表达式：数字运算、字符串的拼接、逻辑运算（三元表达式）…

语句：复杂代码段，if else，switch， do while，for…

可以在花括号中加入表达式，

4.3 列表渲染

wx:for可以用来遍历数组和对象

1
2
3
4
5
<view>
  <block wx:for="{{list}}"  wx:for-item="item" wx:for-index="index" wx:key="index">
  {{index}} -- {{item.name}}
  </block>
</view>
  • item 和 index 会默认绑定，可以不用 wx:for-item="item" wx:for-index="index"指定。
  • wx:key 绑定的值 有如下选择

  1. string 类型，表⽰ 循环项中的唯⼀属性

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

1
2
list:[1,2,3,4,5]
wx:key="*this"
  • 遍历对象的时候，可以根据语义化把 item 改为 value，index 改为 key
1
2
3
<view wx:for="{{Person}}"  wx:key="key" wx:for-item="value" wx:for-index="key" >
{{key}} -- {{value}}
</view>
  • block

渲染⼀个包含多节点的结构块 block最终不会变成真正的 dom 元素。起到占位的作用，比如上面的wx-for 的 item 项。

4.4 条件渲染

wx:if

在框架中，使⽤ wx:if=”“ 来判断是否需要渲染该代码块。wx:if的原理是直接把标签从页面结构给移除掉，都不会渲染该元素。初次花销比较大

hidden

原理是通过修改display属性

1
2
<view hidden > True </view> // 默认不显示
<view hidden="{{condition}}"> True </view>

使用场景

频繁切换 ⽤ hidden，不常使⽤⽤ wx:if

hidden 属性不要和 样式 display 一起使用，display 可能会覆盖hidden 中的 display 属性，从而使 hidden 失效。

4.5 小程序的事件绑定

⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等。不同的组件⽀持不同的事件，具体看组件的说明即可。

简单的双向绑定：

  1. 需要给input标签绑定 input事件 ，绑定关键字 bindinput
1
bindinput="handleMenuChange" //不需要加花括号
  1. 如何获取输入框的值 ，通过事件源对象来获取 e.detail.value
  2. 把输入框的值 赋值到 data当中，
1
2
3
4
5
6
7
 //不能直接 
 1 this.data.num=e.detail.value 
   2 this.num=e.detail.value 
// 正确的写法
   this.setData({
     num:e.detail.value 
   })
  1. 需要加入一个点击事件
    • 点击事件 bindtap
    • 无法在小程序当中的 事件中 直接传参
    • 通过自定义属性的方式来传递参
    • 事件源中获取 自定义属性

小程序里面修改 data 值

1
2
3
4
5
6
// 和 vue 中不一样 
this.setData({
        num:e.detail.value 
      })
//获取值,也和 vue 不一样，要加上 data 
this.data.count

小程序的事件如何传参

任何和鼠标相关的操作，我们都可以在 e 这个对象里面找到

1
2
3
4
5
// 直接写成下面这样，会把 handleTab(1) 整个当做一个函数名
<button bindtap="handleTab(1)">+</button>

// 需要自定义一个属性，把参数传给这个属性，然后通过 *e.currentTarget.dataset* 获取这个参数
<button bindtap="handleTab" data-operation="{{1}}">+</button>

5 样式 wxss

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。 与 CSS 相⽐，WXSS 扩展的特性有：

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

5.1 尺⼨单位 rpx

rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。可根据如下公式计算在当前屏幕 1 px 是多少 rpx

$ page (px) = 750 （rpx）\ 1(px)= 750 (rpx) / page$

1
2
3
4
5
// 在屏幕尺寸为 375 rpx 下，100px 的换算
width:calc(750rpx * 100 / 375);

// rpx 直接是在 750rpx 下的 200px，和上面的宽度值是一样的
height:200rpx;

注意：750 和 rpx 中间不要留空格 ；运算符的两边 要留空格

5.2 样式导⼊

小程序中不需要主动来引入样式文件 ，只要在一个页面的各个文件名字相同，就会自动引入。

小程序使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。

1
@import "common.wxss";

5.3 选择器

在小程序中 * 通配符是不识别的，如果想要使用通配符，就把通配符换成所有标签，感觉很麻烦。

5.4 在小程序中使用 less

原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都⽀持，如 wepy ， mpvue ， taro 等。 但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。

可以使用 vsCode 中的 easy less 插件，自动将 less 文件转换成同名同目录下的 css 文件

配置 vscode

1
2
3
4
//   // 自动把 .less 文件转化为 .wxss
"less.compile": {
        "outExt":       ".wxss"
   }

6 常见组件

组件里面支持换行，空格只渲染一个

view 相当于 div 标签

1
2
// hover-class，点击元素的瞬间出现一个 h-class的类，然后消失
<view hover-class="h-class">demo02.wxml</view>

text标签

  1. ⽂本标签
  2. 只能嵌套text
  3. ⻓按⽂字可以复制（只有该标签有这个功能） selectable、user-select
  4. 可以对空格 回⻋ 进⾏编码 decode
  5. 连续显示空格 space

image

图⽚标签，image组件默认宽度320px、⾼度240px。支持懒加载 lazy-load，image 组件是单标签，必须要加上/.

1
<image src="//img.alicdn.com/tps/i4/TB1dAd8TpT7gK0jSZFpSuuTkpXa.jpg_q90_.webp" alt=""/>

mode 属性控制着图⽚裁剪、缩放的模式，常用的模式有：

  • scaleToFill :填充宽和高

  • aspectFit :保持宽高比 确保图片的长边 显示出来 页面轮播图 常用

  • aspectFill :保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。 少用

  • widthFix :以前web的图片的 宽度指定了之后 高度 会自己按比例来调整 常用

  • bottom。。 类似以前的 backgroud-position

swiper & swiper-item

因为 swiper 和 image 都存在默认样式，所以需要计算轮播图的高度。swiper 标签 存在默认样式: width 100% ; height 150px，swiper 高度 无法实现由内容撑开 ;image 存在默认宽度和高度 320 * 240 。

先找出来 原图的宽度和高度 等比例 给 swiper 定宽度和高度，例如：原图的宽度和高度 520* 280px,按照下面的公式，swipe的高度是=$100vw * 280px / 520px$

$swiper_{宽度} / swiper_{高度} = 原图{宽度} / 原图{高度} \ swiper_{高度} = swiper_{宽度} * 原图{高度} / 原图{宽度}$

1
2
3
swiper {
	height: calc(100vw * 280px / 520px);
}

swiper 重要属性 autoplay ：自动轮播、interval：轮播间隔、circular:轮播循环，不设置就会每次从第一张图片轮播、indicator-dots小圆点

1
<swiper autoplay interval="1000" circular indicator-dots="{{true}}">

导航组件 navigator

navigator 块级元素 默认会换行 可以直接加宽度和高度
url 要跳转的页面路径 ： 绝对路径 相对路径
target 要跳转到当前的小程序 还是其他的小程序的页面：1）self 默认值 自己 小程序的页面 2） miniProgram 其他的小程序的页面

open-type 跳 转的方式
1 navigate ：默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
2 redirect ： 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
3 switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面（无法返回其他界面）
4 reLaunch ： 关闭所有页面，打开到应用内的某个页面（也可以用来跳转到 tabbar 相关页面）

rich-text 富文本标签

类似 vue 中的 v-html ，具体使用看官网。

  • nodes属性来实现 ：接收标签字符串 ，在 data 中定义变量

  • 接收对象数组 

1
<rich-text nodes="{{html}}"></rich-text>

button 标签

外观的属性
1 size 控制按钮的大小
default 默认大小
mini 小尺寸
2 type 用来控制按钮的颜色
default 灰色
primary 绿色
warn 红色
3 plain 按钮是否镂空，背景色透明
4 loading 文字前显示正在等待图标

button 开发能力
open-type：
1 contact 直接打开 客服对话功能 需要在微信小程序的后台配置 只能够通过真机调试来打开
2 share 转发当前的小程序 到微信朋友中 不能把小程序 分享到 朋友圈
3 getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用 不是企业的小程序账号 没有权限来获取用户的手机号码
1 绑定一个事件 bindgetphonenumber
2 在事件的回调函数中 通过参数来获取信息
3 获取到的信息 已经加密过了
需要用户自己待见小程序的后台服务器，在后台服务器中进行解析 手机号码，返回到小程序中 就可以看到信息了
4 getUserInfo 获取当前用户的个人信息
使用方法 类似 获取用户的手机号码 bindgetuserinfo
可以直接获取 不存在加密的字段
5 launchApp 在小程序当中 直接打开 app
1 需要现在 app中 通过app的某个链接 打开 小程序
2 在小程序 中 再通过 这个功能 重新打开 app
3 找到 京东的app 和 京东的小程序
6 openSetting 打开小程序内置的 授权页面
1 授权页面中 只会出现 用户曾经点击过的 权限
7 feedback 打开 小程序内置的 意见反馈页面
1 只能够通过真机调试来打开

icon 标签

type，size，color等等

radio 单选框

1 radio标签 必须要和 父元素 radio-group来使用，color 可以修改单选框的颜色
2 value 选中的单选框的值
3 需要给 radio-group 绑定 change事件 bindchange
4 需要在页面中显示 选中的值

1
2
3
4
5
// value 值 在绑定的事件 e 中可以获取
<radio-group bindchange="handleChange">
   <radio color="red" value="male">男</radio>
   <radio color="red" value="female" >女</radio>
 </radio-group>

checkbox 多选框

和 radio 一样需要父元素 checkbox-group 一起使用

7 ⾃定义组件

7.1 创建⾃定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成，自定义组件中的 properties 用来接收父组件数据，所有的事件都要写在 methods

1）常见自定义组件

在⽂件夹内 components/myHeader ，创建组件名为 myHeader,最好在微信开发者工具创建文件夹 components/myHeader ，然后在 myheader 文件夹右键创建组件，输入同名 myHeader，就会自动生成上面 4个文件

2）声明组件
⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明。如果是使用微信开发者工具创建的文件夹，这一步会自动生成。

1
2
3
{
  "component": true
}

3）编辑组件

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

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

4）注册组件

在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和
⾃定义⽅法

7.2 声明引入自定义组件

在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径。

1
2
3
"usingComponents": {
  "Tabs":"/components/Tabs/Tabs" //这里 myHeader -- my-header 适用
}

在页面中使用自定义组件

1
<Tabs></Tabs> // 区分大小写 和 vue 不一样

7.3 父子组件传递

父传子通过 properties 传递

1）父组件 js 中 Page 对象的 data 属性里是具体的数据，父组件中用自定义属性把数据传给子组件

1
<Tabs tabs="{{tabs}}"></Tabs>

2）子组件的 js 文件里 properties 用来接收父组件传递的数据。

1
2
3
4
5
6
7
8
9
properties: {
        tabs: {
            type: Array,
            value: []
        }
 }
 
//子组件中使用这个传递的变量
<view class="tabs-title-item" wx:for="{{tabs}}" wx:key="id"> {{item.name}}</view>

子传父通过事件触发
触发父组件中的自定义事件，指定事件名同时传递数据给 父组件 。this.triggerEvent("父组件自定义事件的名称",要传递的参数)

子组件中通过一个点击或者其他触发事件 ，在这个事件方法中传递参数

1
this.triggerEvent("itemChange", { index })

父组件 自定义事件，事件名必须是handle + 事件名字(首字母大写),

1
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>

!!!!在父组件中绑定一个事件函数，在这个函数中通过 e.detail获取传递的参数。

！！！修改data 中的数据 2 步曲：1）把修改值付给 const 变量；2）调用 this.setDate()方法

1
2
3
4
5
6
7
8
9
10
11
12
handleItemChange(e) {

// 接受子组件传递的参数
const { index } = e.detail
let { tabs } = this.data

tabs.forEach((item, i) => index === i ? item.isActived = true : item.isActived = false)

this.setData({
tabs
})
}

7.4 其他属性

7.5 ⼩程序⽣命周期

应⽤⽣命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//app.js
App({
  //  1 应用第一次启动的就会触发的事件  
  onLaunch() {
    //  在应用第一次启动的时候 获取用户的个人信息 
    // console.log("onLaunch");
    // aabbcc

    // js的方式来跳转 不能触发 onPageNotFound
    // 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/demo09/demo09' 
    });       
    // console.log("onPageNotFound");
  }
})

页面生命周期

open-type带有关闭当前所有页面的都可以卸载页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// pages/demo18/demo18.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onLoad");
    // onLoad发送异步请求来初始化页面数据 
  },
    
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onShow");
  },
    
  /**
    * 生命周期函数--监听页面初次渲染完成
    */
  onReady: function () {
    console.log("onReady");
  },
    
  /**
   * 生命周期函数--监听页面隐藏
   */
  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");
  },
    
  /**
   * 页面的尺寸发生改变的时候 触发
   * 小程序 发生了 横屏竖屏 切换的时候触发 
   */
  onResize(){
    console.log("onResize");
  },
    
  /**
   * 1 必须要求当前页面 也是tabbar页面
   * 2 点击的自己的tab item的时候才触发
   */
  onTabItemTap(){
    console.log("onTabItemTap");
  }
})

微信小程序注意事项

  • 修改 data 数据值；1） 定义一个常量获取改变值；2）利用 setData 方法将常量付给 data 属性
1
2
3
4
5
6
7
8
handleItemChange(e){
  // 1 获取被选中的复选框的值
  const checkedList=e.detail.value;
  // 2 进行赋值
  this.setData({
    checkedList
  })
}

  • 单标签要有结尾符 /,"" 里面的 引号 要用 ''

  • 小程序的 class 类名添加可以直接用三元表达式

1
class="tabs-title-item {{item.isActived ? 'active' : ''}}"
  • 监听事件的方法需要传递参数：

自定义一个属性，将这个参数赋值给这个属性，然后通过 e 的值获取

  • 类似 active class 的激活和不激活，最好使用三元表达式
1
tabs.forEach((item, i) => index === i ? item.isActived = true : item.isActived = false)

样式注意点

  • navigationBarTextStyle头部字体颜色只有 white 和 black，16进制都不可以。。

tabar 配置注意

  • 图标 81*81 最好，不超过40kb，不显示就重启开发者工具
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家