从零构建一个微信小程序

一、微信小程序介绍

---

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

1.1 为什么是微信小程序？

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

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

1. 支付宝小程序
2. 百度小程序
3. QQ 小程序
4. 今日头条 + 抖音小程序

1.3 优秀的第三方小程序

1. 拼多多
2. 滴滴出行
3. 欢乐斗地主
4. 智行火车票
5. 唯品会
6. …

二、环境准备

---

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

2.1 注册账号

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

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

2.2 获取 APPID

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

2.3 开发工具

1. 微信开发者工具
2. 微信小程序自带开发者工具，集开发、预览、调试、发布于一身的完整环境。但是由于编码的体验不算好，因此建议使用vs code + 微信小程序编辑工具来实现编码。
   • vs code 负责敲代码，微信编辑工具负责预览。
   • 微信编辑工具负责预览。

三、第一个微信小程序

---

3.1 打开微信开发者工具

1. 第一次登陆需要扫码。

四、小程序目录结构

---

1. 小程序框架的目标是通过尽可能简单、搞笑的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
2. 小程序框架提供了自己的视图层描述语言 WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

4.1 小程序文件结构和传统 Web 对比

结构	传统 Web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	JavaScript	JavaScript
配置	无	JSON

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

4.2 基本的项目目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fwpO6B5S-1642639773070)(D:\前端笔记\image\小程序项目结构.png)]

五、小程序配置文件

---

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

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

5.1 全局配置 app.json

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

   {
     // 页面
     "pages":[
       "pages/index/index",
       "pages/logs/logs"
     ],
     // 全局默认窗口表现
     "window":{
       "backgroundTextStyle":"light",
       "navigationBarBackgroundColor": "#FFF",
       "navigationBarTitleText": "Weixin",
       "navigationBarTextStyle":"black"
     },
     "style": "v2",
     "sitemapLocation": "sitemap.json"
   }
   

2. 字段的含义：

   • pages 字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户知道当前小程序页面定义在哪个目录。
   • window 字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
   • 完整的配置信息请参考app.json。

5.1.1 tabbar

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IcFIumsE-1642639773070)(D:\前端笔记\image\tabbar.png)]

5.2 页面配置 page.json

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

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

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

   属性	类型	默认值	描述
   navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
   navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
   navigationBarTitleText	String		导航栏标题文字内容
   backgroundColor	HexColor	#ffffff	窗口的背景色
   backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
   enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
   onReachBottomDistance	Number	50	页面上拉触底事件触发时距
   disableScroll	Boolean	false

5.3 sitemap 配置 - 了解即可

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

六、模板语法

---

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

6.1 数据绑定

6.1.1 普遍写法

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

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

6.1.2 组件属性

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

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

• 使用 Boolean 类型充当属性
  • 字符串和花括号之间一定不要存在空格，否则会导致识别失败。

6.2 运算

6.2.1 三元运算

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

6.2.2 算数运算

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

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

6.2.3 逻辑判断

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

6.2.4 字符串运算

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

6.3 列表渲染

6.3.1 wx:for

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

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

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

4. wx:key 绑定的值，有以下几种选择：

   • String 类型，表示循环项中的唯一属性。

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

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

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

5. 只有一层循环的时候，wx:for-item=“item” 和 wx:for-index=“index” 可以省略。

6.3.2 block

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

6.4 条件渲染

6.4.1 wx:if

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

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

6.4.2 hidden

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

• 类似 wx:if 。
• 频繁切换用 hidden ，不常使用 wx:if 。
• hidden 属性不要和样式 display 一起使用。

七、小程序事件的绑定

---

1. 小程序绑定事件，通过 bind 关键字来实现。如 bindtap、bindinput、bindchange 等。
2. 不同的组件支持不同的事件。

7.1 wxml

<input bindinput="handleInput" />

7.2 page

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

7.3 特别注意

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

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

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

八、样式 WXSS

---

1. WXSS（Weixin Style Sheets）是一套样式语言，用于描述 WXML 的组件样式。
2. 与 CSS 相比，WXSS 扩展的特性有：
   • 响应式长度：rpx 。
   • 样式导入。

8.1 尺寸单位

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

   设备	rpx 换算 px （屏幕宽度 / 750）	px 换算 rpx （750 / 屏幕宽度）
   iphone5	1rpx = 0.42px	1px = 2.34rpx
   iphone6	1rpx = 0.5px	1px = 2rpx
   iphone6 Plus	1rpx = 0.552px	1px = 1.81rpx

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

2. 使用步骤：

   • 确定设计稿宽度 pageWidth 。

   • 确定比例 750rpx = pageWidth px ，因此 1px = 750rpx / pageWidth 。

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

     /*
     	1. 利用一个属性 calc 属性（css 和 wxss 都支持的一个属性）。
     		* 750 和 rpx 中间不用加空格。
     		* 运算符的两边也不要加空格。
     
     */
     
     /* width: 200rpx; */
     height: 200px;
     font-size: 40rpx;
     background-color: aqua;
     width: calc(750rpx*100/375);
     

8.2 样式导入

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

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

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

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

8.3 选择器

1. 特别注意的是小程序**不支持通配符 * **，因此以下代码无效：

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

2. 目前支持的选择器有：

   选择器	样例	样例描述
   .class	.intro	选择所有拥有 class = “intro” 的组件
   #id	#firstname	选择拥有 id = “firstname” 的组件
   element	view	选择所有 view 组件
   element,element	view,checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
   nth-child(n)	view:nth-child(n)	选择某一个索引的标签
   ::after	view:after	在 view 组件后边插入内容
   ::befor	view:before	在 view 组件前边插入内容

8.4 小程序中使用 less

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

   • 编辑器是 vs code 。

   • 安装插件 easy less 。

   • 在 vs code 的设置中加入如下配置：

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

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

九、常见组件

---

9.1 view

1. 代替原来的 div 标签。

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

9.2 text

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

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

9.3 image

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

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载

9.4 swiper

微信内置轮播图组件。

1. 轮播图外层容器 swiper 。
2. 每一个轮播项 swiper-item 。
3. swiper 标签存在默认样式。
   • width：100%
   • height：150px
   • image 存在默认宽度和高度（1125 * 352 px）
   • swiper 高度无法实现由内容撑开。
4. 先找出来原图的宽度和高度，等比例给 swiper 定宽度和高度。
   • swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度

9.4.1 swiper

• 滑块视图容器

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, 3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换间隔时间
circular	Boolean	false	s是否轮播

9.5 navigator

导航组件，类似超链接标签

​ 块级元素，默认会换行，可以直接加宽度和高度。

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值 self/miniProgram
url	String		当前小程序的跳转链接
open-type	String	navigate	跳转方式

open-type 有效值

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabBer 页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳到 tabBer 页面
switchTab	跳转到 tabBer 页面，并关闭其他所有非 tabBer 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭所有页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
exit	退出小程序，target=“miniProgram” 时生效

9.6 rich-text

富文本标签：

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

通过 HTML String 渲染

<div class="div_class">
  <h1>
    Title
  </h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;abox of
    <b>&nbsp;chocolates</b>
  </p>
</div>

9.7 button

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

属性	类型	默认值	必填	说明
size	string	default	否	按钮的大小
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带 loading 图标
form-type	string		否	用于组件，点击分别会触发组件的 submit/reset 事件
open-type	string		否	微信开放能力

size 的合法值

值	说明
default	默认大小
mini	小尺寸

type 的合法值

值	说明
primary	绿色
default	白色
warn	红色

open-type 的合法值

值	说明
contact	打开客服对话，如果用户在对话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息。
share	触发用户转发，不能把小程序分享到朋友圈中的。
getPhoneNumber	获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息。
getUserInfo	获取用户信息，可以从 binggetuserinfo 回调中获取到用户信息。
launchApp	打开 APP ，可以通过 app-parameter 属性设定向 APP 传的参数。
openSetting	打开授权设置页。
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容。

9.8 icon

属性	类型	默认值	必填	说明
type	string		是	icon 的类型，有效值：success，success_no_circle,info,warn,waiting,cancel
size	number/string	23	否	icon 的大小
color	string		否	icon 的颜色，同 css 的 color

9.9 radio

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

• 需要搭配 radio-group 一起使用。

9.10 checkbox

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

• 需要搭配 checkbox-group 一起使用。

十、自定义组件

---

类似 Vue 或者 React 中的自定义组件。

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

10.1 创建自定义组件

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

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

1. 页面 .js 文件中，存放事件回调函数的时候，存放在 data 同层级下。
2. 组件 .js 文件中，存放事件回调函数的时候，必须要存放在 methods 中。

10.2 父组件向子组件传递数据

1. 父组件（页面）向子组件传递数据通过
   • 在子组件上进行接收
   • 把这个数据当成是 data 中的数据直接用即可。

<!-- 父组件wxml -->

<Tabs aaa="a123a"></Tabs>

// 子组件js

properties: {
  // 需要接收的数据的名称
  aaa: {
    // type:要接收的数据的类型
    type: String,
    // value: 默认值
    value: ''
  }
}

<!-- 子组件的wxml -->

<view>
	
</view>

10.3 slot 插槽

10.4 其他属性

10.5 定义段与实例方法

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

定义段	类型	是否必填	描述
properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表。
data	Object	否	组件的内部数据，和 properties 一同用于组件的模板渲染。
observers	Object	否	组件数据字段监听器，用于监听 properties 和 data 的变化。
methods	Object	否	组件的方法，包括事件响应函数和任意的自定义方法。
created	Function	否	组件生命周期函数，在组件实例刚刚被创建时执行，注意此时不能调用 setData 。
attached	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行。
ready	Function	否	组件生命周期函数，在组件布局完成后执行。
moved	Function	否	组件生命周期函数，在组件实例被移动到节点树另一个位置时执行。
detached	Function	否	组件生命周期函数，在组件实例被从页面节点树移除时执行。

10.6 组件-自定义组件传参

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

十一、小程序生命周期

---

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

11.1 应用生命周期

属性	类型	默认值	必填	说明
onLaunch	function		否	监听小程序初始化。（在应用第一次启动的时候，获取用户的个人信息）
onShow	function		否	监听小程序启动或切前台。（对应用的数据或者页面效果重置）
onHide	function		否	监听小程序切后台。（暂停或者清楚定时器）
onError	function		否	错误监听函数。（在应用发生代码报错的时候，收集用户的错误信息，通过异步请求，将错误的信息发送后台去）
onPageNotFound	function		否	页面不存在监听函数。（如果页面不存在了，通过js的方式来重新跳转页面，重新跳到第二个首页）

11.2 页面生命周期

属性	类型	说明
data	Object	页面的初始数据。
onLoad	function	生命周期回调—监听页面加载。（发送异步请求来初始化页面数据）
onShow	function	生命周期回调—监听页面显示。
onReady	function	生命周期回调—监听页面初次渲染完成。
onHide	function	生命周期回调—监听页面隐藏。
onUnload	function	生命周期回调—监听页面卸载。
onPullDownRefresh	function	监听用户下拉动作。（页面的数据或者效果重新刷新）
onReachBottom	function	页面上拉触底事件的处理函数。（上拉加载下一页数据）
onShareAppMessage	function	用户点击右上角转发。
onPageScroll	function	页面滚动触发事件的处理函数。
onResize	function	页面尺寸改变时触发。
onTabltemTap	function	当前是 Tab 页时，点击 Tab 时触发。