【移动端】微信小程序开发从入门到成神（精兵）_微信小程序有移动版的吗

1. 移动端微信小程序运行环境是微信，全程使用微信服务
2. 本文根据B站《黑马程序员前端微信小程序开发教程》整理
   

   文章目录

   • 一、注册
   • 二、开发者工具
   • 三、小程序开发
   • • （一）标签
     • （二）基本语法
     • • 1、数据绑定
       • 2、事件绑定
       • 3、事件传参与数据同步
       • 4、条件渲染
       • • （1）wx:if
         • （2）hidden
       • 5、列表渲染
       • • （1）wx:for
         • （2）wx:key
       • 6、wxss
       • • （1）rpx
         • （2）@import
       • 7、iconfont
     • （三）项目配置
     • • 1、全局配置
       • • （1）window
         • （2）tabBar
       • 2、页面配置
     • （四）数据请求
     • • 1、GET
       • 2、POST
       • 3、onLoad
       • 4、跳过 HTTPS 合法域名校验
     • （五）页面切换
     • • 1、声明式导航
       • 2、编程式导航
       • • （1）wx.switchTab()
         • （2）wx.navigateTo()
         • （3）wx.navigateBack()
     • （六）页面传参
     • • 1、声明式导航传参
       • 2、编程式导航传参
       • 3、onLoad 接收导航参数
     • （七）页面事件
     • • 1、下拉刷新
       • 2、上拉触底
     • （八）生命周期
     • • 1、应用生命周期函数
       • 2、页面生命周期函数
     • （九）自定义组件
     • • 1、创建并使用自定义组件
       • 2、组件样式
       • • （1）组件样式隔离
         • （2）组件样式隔离选项
       • 3、组件数据、方法和属性
       • • （1）组件数据
         • （2）组件方法
         • （3）组件属性
       • 组件必备知识
     • （十）npm 包
     • • 1、运行环境
       • 2、Vant Weapp
       • • （1）介绍
         • （2）安装与使用
     • （十一）uniapp / 微信小程序项目

一、注册

• 微信公众平台扫码注册/登录
• 查看并记录 AppID
  
• AppID

二、开发者工具

• 开发者工具（微信版 VSCode）
  
• 按需选择版本
  
• 安装后新建/导入项目
  
• 输入项目信息（已有项目故导入，新 AppID 为新建）
  
• 开发者工具布局
  
• 项目目录结构

      ├── pages      # 存放小程序的各个页面
      │   ├── index  # index页面
      │   │   ├── index.js     # 页面逻辑
      │   │   ├── index.json   # 页面配置    
      │   │   ├── index.wxml   # 页面结构
      │   │   └── index.wxss   # 页面样式表
      │   └── logs   # logs页面
      │       ├── logs.js      # 页面逻辑
      │       ├── logs.json    # 页面配置
      │       ├── logs.wxml    # 页面结构
      │       └── logs.wxss    # 页面样式表
      ├── utils
      │   └── util.js
      ├── app.js     # 小程序的逻辑文件
      ├── app.json   # 小程序的配置文件
      ├── app.wxss   # 全局公共样式文件
      └── project.config.json   # 全局项目配置
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

• 更多详情

三、小程序开发

（一）标签

• 更多详情

（二）基本语法

• 语法规则多基于 Vue，可参考使用

1、数据绑定

2、事件绑定

3、事件传参与数据同步

• 小程序不支持绑定事件同时传参，需要另外传递参数

4、条件渲染

（1）wx:if

• 控制条件复杂

wx:if = "{{ }}"
wx:elif = "{{ }}"
wx:else
1
2
3

（2）hidden

• 控制条件简单，频繁切换

hidden = "{{ }}"
1

5、列表渲染

（1）wx:for

wx:for = "{{ Array }}"	// 循环数组
{{ index }}				// 默认索引
{{ item }}				// 默认循环项

wx:for-index = "{{ newindex }}"		// 索引重命名
wx:for-item = "{{ newitem }}"		// 循环项重命名
{{ newindex }}						// 重命名索引
{{ newitem }}						// 重命名循环项
1
2
3
4
5
6
7
8

（2）wx:key

wx:key = "id"
1

6、wxss

（1）rpx

• 规定 750rpx 等于屏幕宽度
  • px 换算 rpx ：750 / 屏幕宽度
  • rpx 换算 px：屏幕宽度 / 750

（2）@import

• 导入外联样式表

@import “相对路径”
1

7、iconfont

• 在微信小程序中使用iconfont

（三）项目配置

1、全局配置

• 全局配置文件 app.json

（1）window

• 全局配置所有页面
  

（2）tabBar

• tabBar 属性

• list 属性

2、页面配置

• 就近原则，页面配置覆盖全局配置
  

（四）数据请求

• 宿主环境非浏览器，所以不存在跨域问题和 ajax 请求，仅发起网络数据请求
• 出于安全考虑，微信小程序限制网络数据请求 wx:request()
  • 仅支持 HTTPS 类型接口
  • 配置 request 合法域名，将接口域名添加到信任列表
    • 登录微信小程序管理后台 => 开发 => 开发设置 => 服务器域名 => 修改 request 合法域名

1、GET

getInfo(){
	wx.request({
		url:"https://domain’,	// 请求的接口地址，必须基于 https 协议
		method :GET,					// 请求的方式
		data: {							// 发送到服务器的数据
			name : ' zs',
			age: 22
		},
		success: (res) => { 			// 请求成功之后的回调函数
			console.log(res)
		}
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2、POST

postInfo(){
	wx.request({
		url:"https://domain’,	// 请求的接口地址，必须基于 https 协议
		method :POST,					// 请求的方式
		data: {							// 发送到服务器的数据
			name : ' zs',
			age: 22
		},
		success: (res) => { 			// 请求成功之后的回调函数
			console.log(res)
		}
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3、onLoad

• 监听页面加载，自动请求初始化数据

onLoad：function(){
	this.getInfo()
	this.postInfo()
}
1
2
3
4

4、跳过 HTTPS 合法域名校验

• 若后端仅提供 http 协议接口，在微信开发者工具中，临时开启开发环境不校验请求域名、TLS 版本及 HTTPS 证书选项，跳过request 合法域名校验
• 仅限开发、调试阶段使用
  

（五）页面切换

1、声明式导航

• <navigator>导航组件（类似 a 标签）

// 跳转 tabBar 页面
<navigator url='/pages/home/home' topen-type='switchTab'>导航到 tabBar 页面<navigator/>
// 跳转非 tabBar 页面
<navigator url='/pages/info/info' topen-type='navigate'>导航到非 tabBar 页面<navigator/>
<navigator url='/pages/info/info'>导航到非 tabBar 页面<navigator/>
1
2
3
4
5

2、编程式导航

• 调用小程序导航 api

（1）wx.switchTab()

• 导航到 tabBar

（2）wx.navigateTo()

• 导航到非 tabBar

（3）wx.navigateBack()

• 后退导航

// .wxml
<button bindtap="toDreams">导航到 tabBar</button>
<button bindtap="toData">导航到非 tabBar</button>
<button bindtap="backOne">编程式导航后退 1 层</button>
<button bindtap="backN">编程式导航后退 N 层</button>

// .js
// 编程式导航到 tabBar
toDreams(){
  wx.switchTab({
    url: '/pages/dreams/dreams',
  })
},
// 编程式导航到非 tabBar
toData(){
  wx.navigateTo({
    url: '/pages/info/info',
  })
},
// 编程式导航后退 1 层
backOne(){
  wx.navigateBack()
},
// 编程式导航后退 N 层
backN(){
  wx.navigateBack({
    delta: 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

（六）页面传参

1、声明式导航传参

<navigator url='/pages/info/info?name=zs&age=11'>导航到 info 页面<navigator/>
1

2、编程式导航传参

// .wxml
<button bindtap="toData">导航到 info 页面</button>

// .js
// 编程式导航到非 tabBar
toData(){
  wx.navigateTo({
    url: '/pages/info/info?name=zs&age=11',
  })
}
1
2
3
4
5
6
7
8
9
10

3、onLoad 接收导航参数

• 通过声明式/编程式导航传参所携带的参数，可以直接在 onLoad 事件中获取并赋值到 data 对象

// options 为导航传递过来的参数对象
onLoad(options){
	this.setData({
		query: toptions 
	)}
}
1
2
3
4
5
6

（七）页面事件

1、下拉刷新

• 移动端专有名词，指通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为，推荐页面单独开启

"enablePullDownRefresh ": true,		// 开启下拉刷新
"backgroundColor": "#efefef",		// 修改下拉刷新背景色
"backgroundTextStyle": "dark"		// 修改下拉刷新圆点色（dark/light）
1
2
3

2、上拉触底

• 移动端专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

"onReachBottomDistance":100		// 默认值为 50，默认为 px 单位无需手动添加
1

（八）生命周期

1、应用生命周期函数

• 小程序在app.js中声明应用生命周期函数

App({
	onLaunch(options) { },		// 小程序初始化完成时，全局触发一次（初始化数据）
	onShow(options) { },		// 小程序启动，或从后台进入前台显示时触发
	onHide() { }				// 小程序从前台进入后台时触发
)}
1
2
3
4
5

2、页面生命周期函数

• 小程序在页面.js中声明页面生命周期函数

Page({
	onLoad(options){ },			// 监听页面加载，一个页面只调用一次（初始化数据）
	onShow() { },				// 监听页面显示
	onReady() { },				// 监听页面初次渲染完成，一个页面只调用一次（修改页面内容）
    onHide() { },				// 监听页面隐藏
	onUnload() { 	}			// 监听页面卸载，一个页面只调用一次
)}
1
2
3
4
5
6
7

（九）自定义组件

1、创建并使用自定义组件

• 创建组件
  • 项目根目录 => components 文件夹 => 组件文件夹
• 引入组件
  • 全局引入：app.json，多页面内使用
  • 局部引入：页面.json，单页面内使用

// .json
"usingComponents":{
	"组件名": "组件路径"
}
1
2
3
4

• 使用组件

// .wxml
<组件名></组件名>
1
2

2、组件样式

（1）组件样式隔离

• 组件之间、组件与页面之间，样式互不影响
• app.wxss 的全局样式对组件无效
• 仅 class 选择器有样式隔离，id / 属性 / 标签选择器不受样式隔离影响
• 建议在组件和引用组件的页面中使用 class 选择器，不使用 id / 属性 / 标签选择器

（2）组件样式隔离选项

• 如果用外界控制组件内部的样式，可以通过stylelsolation修改组件的样式隔离选项，以下两种方法均可

// 在组件的 js 文件中新增如下配置
Component({
	options: {
		styleIsolation: "isolated'
	}
})
// 在组件的 .json 文件中新增如下配置
"styleIsolation":"isolated"
1
2
3
4
5
6
7
8

3、组件数据、方法和属性

（1）组件数据

• 用于组件模板渲染的私有数据，需要定义到 data 节点

（2）组件方法

• 事件处理函数和自定义方法定义到 methods 节点
• 自定义方法建议以_开头

（3）组件属性

• 组件对外属性properties，用来接收外界传递到组件中的数据
• 小程序中，properties 等同 data 数据，但一般设置前者为传入数据，后者为私有数据

Component({
	// 属性定义
	properties: {
		max: {				// 1、完整定义属性的方式【需要默认值】
			type: Number，		// 属性值的数据类型
			value: 10			// 属性默认值
		},
		max: Number			// 2、简化定义属性的方式【不用默认值】
		
	}
})

<my-test1 max="10"></my-test1>
1
2
3
4
5
6
7
8
9
10
11
12
13

组件必备知识

（十）npm 包

1、运行环境

• 微信小程序运行环境不同于 PC 端，不支持依赖Node.js 内置库、浏览器内置对象、C++ 插件的包

2、Vant Weapp

（1）介绍

• Vant Weapp：轻量、可靠的小程序 UI 组件库，类似 ElementUI

（2）安装与使用

• 安装：微信开发者工具中右击目录空白处 => 在外部终端窗口打开 => npm init -y

// 通过 npm 安装
npm i vant-weapp -S --production

// 通过 yarn 安装
yarn add vant-weapp --production
1
2
3
4
5

• 构建：微信开发者工具中点击工具 => 构建 npm，并点击详情 => 本地设置 => 勾选使用 npm 模块选项
  • 注意：本人开发者工具版本1.06.2303220，无【使用 npm 模块】选项，猜测新版工具 npm 属默认选项忽略即可
    
• 使用
  • 引入组件

// app.json
"usingComponents": {
  "van-button": "../../miniprogram_npm/vant-weapp/button/index"	// 本地相对路径
}
1
2
3
4

• • 使用组件

// .wxml 
<van-button type="primary">按钮</van-button>
1
2

（十一）uniapp / 微信小程序项目

• uniapp-黑马优购：没的说，老板大气，大家请自行学习