微信小程序

基本概念

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

官方网址：https://mp.weixin.qq.com/(opens new window)

和其它App的区别

App：应用程序

• WebApp：移动Web/h5开发、它是运行在移动端的浏览器中，使用html、css、js开发，无需下载，直接访问
• 微信小程序App：它运行在微信App中，它使用原生语法开发，或是使用框架（uniapp），从腾讯的服务器下载并且运行
• 原生App：它运行在手机的操作系统上（iOS、Android），它使用OC/Swift、Java/kotlin，还可以使用
  ReactNative/Flutter，它需要从应用商店下载

应用场景

不适合做成微信小程序:

1. 大型游戏
2. 有竞争关系（淘宝、抖音）
3. 用户粘性非常强（抖音 & 快手）

开发步骤

注册

在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发。

小程序信息完善

填写小程序基本信息，包括名称、头像、介绍及服务范围等。

开发小程序

完成小程序开发者绑定、开发信息配置后，开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。

提交审核和发布

完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。

微信开发者工具使用

创建第一个微信小程序原生项目

前提：
拿到AppId（现在是个人版，直接去微信小程序后台 开发 > 开发管理 > 开发设置 去查找，如果去公司之后，找相关人要）

创建一个空白的目录，比如wx-demo（里面啥都不能有）
按照步骤创建
步骤：

#分析第一个微信小程序项目

分析步骤：

1. 先分析项目配置
2. 再分析 App（app.js、app.json、app.wxss）
3. 再分析Page（index、logs）
4. 最后分析其它

具体分析

项目配置

• project.config.json：项目的一个配置文件，我们主要后面要更改的部分如下
• 增强编译（为了一些es的高级语法）、使用npm、不校验合法域名… sitemap.json：搜索引擎优化，一般由运营同学来决定
• app：一个项目中只需要有一个即可
• app.js：入口，写全局逻辑
• app.json：页面注册、项目的tabBar、网络请求、window等等的配置…

传送门：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html(opens new window)

• app.wxss：全局样式

page

• xxx.js【必须】：逻辑、提供模型数据，接受事件处理
• xxx.json：页面配置，只能覆盖全局配置中的window这个选项，传送门：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html(opensnew window)
• xxx.wxml【必须】：页面内容，里面写它提供的组件或是自定义组件，不要写div、span
• xxx.wxss：页面样式，私有

index页面分析

• 静态页面展示
• 里面涉及到的内容（组件、插值表达式、条件渲染、…）

页面栈

页面的声明周期钩子参考：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html(opens new window)

栈的结构：先进后出，后进先出，处在栈里面的页面都不会销毁，除非它出栈了，才会销毁。

事件处理

传送门：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html(opens new window)

在小程序中，事件绑定有两种写法，一种是 bindxxx，xxx代表事件类型，另一种是 catchxxx，xxx代表事件类型

传参：跟vue不一样，它只能通过自定义属性传参 data-xxx=“值”

#wxss & css 的对比
传送门：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html(opens new window)

主要两大方面不太一样：

样式导入

rpx：以后去公司做项目的时候，就是拿着设计稿上的 px * 2 即可