Mp (mini progime)
小程序：项目上线需要年审，年审30元
一.注册小程序的步骤注册
注册注意事项：
一个邮箱只能注册一个小程序
小程序注册成功后，需要进入邮箱进行激活。
登录步骤：
登录微信公众平台，https://mp.weixin.qq.com/
手机扫码后，在手机上确认登录
在开发设置中，存储AppID(小程序ID)
注册账号
![[1280X1280 (51).PNG]]
![[1280X1280 (52).PNG]]
![[1280X1280 (53).PNG]]
这里的邮箱一定不能跟公众号的邮箱重复，要创建一个新邮箱
![[1280X1280 (54).PNG]]
注册国家就是默认的中国大陆；
主体类型是个人，需要填写个人信息；
![[89f3faec-bae8-4385-9103-4015cf45abe3.png]]
![[6f58c35d-5b70-4fa2-9d53-100616568f91.png]]
![[fcab5124-d9d9-4fbb-b05e-394f0b6f621c.png]]
![[929b9755-8899-4f7a-b9e1-4490615260ce.png]]
获取AppID
是开发者唯一的身份验证，以后小程序的上线，发布，必须要这个ID；如果不发布，只是简单玩一下，就可以不用注册这个APPID，但是里面的一些高级功能还是不能使用，比如：获取用户信息，支付等不能使用； 点击登录
![[8d9e7cbf-ad2a-4db9-a549-60c0c3c939f1.png]]
选择账号登陆或者扫一扫二维码登陆
![[586b8e68-90fe-4f1d-aa9d-cd7dffe10560.png]]
登陆之后点击开发管理，找到开发设置
![[ce7183b1-4596-44da-99a3-7c4d686d1c07.png]]
二.下载并安装微信开发者工具
开发—> 工具–>下载
![[195a869c-e60b-4a8c-a7d2-15144fdf4856.png]]
![[b086936e-5747-4663-bbdc-ceeb2ecc759c.png]]
![[7b71736e-e40a-4f9b-bc98-ac2d71073751.png]]
![[976d17e4-b769-4565-83b1-8fee5573af0c.png]]
安装成功之后就会在桌面上看到微信web开发者工具 这个快捷键了，mac和window的图标不太一样
三.创建小程序项目
启动微信开发者工具
扫码
创建小程序
填写信息 （选择不使用云服务）
打开微信开发者工具
![[8a0c7966-3bb2-4905-8e8e-6bfe000bb6a6.png]]
- 第一次打开微信开发者工具的时候，需要进行扫码登陆
3）添加小程序
![[96863532-585d-4db9-944f-e215d1b21fd6.png]]
![[de97080c-eb56-4fb9-b5fb-a42b7109a7b2.png]]
4）创建小程序
![[119e9364-5bdf-45b8-87fc-7021e61263c5.png]]
5）创建项目
![[c6d2c084-8b25-471c-aba4-c3e6b2f08c45.png]]
![[0c696855-4355-40b8-9b96-997f409bde05.png]]
创建成功的页面就是这样的 最左边是小程序洁面，并且可以用你自己的微信来进行授权，我的默认就是我的微信，你们的可能需要点击进行授权
四.项目初始化目录结构
![[87ca6889-b48c-4537-9fba-a83c79b793b4.png]]
五.小程序全局配置 app.json
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json" }六.小程序全局配置 app.json ----window的配置
“backgroundTextStyle”:“light”, 下拉 loading 的样式，仅支持 dark / light
“backgroundColor”:“#fff000”, 窗口的背景色
“navigationBarBackgroundColor”: “#fff”, 导航栏背景颜色，
“navigationBarTitleText”: “Weixin”, 导航栏标题文字内容
“navigationBarTextStyle”:“black” 导航栏标题颜色，仅支持 black / white
“enablePullDownRefresh”:true 是否开启全局的下拉刷新。
“onReachBottomDistance”: 100 页面上拉触底事件触发时距页面底部距离，单位为 px。
注意：
json文件中不能写注释
前两条配置都必须开启下拉刷新才有效果
![[b4bf7280-1dec-445d-9335-1b5619229095.png]]
七. 小程序全局配置 app.json ----tabBar的配置
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
“tabBar"和"window"是并列关系
有一些配置项的颜色只接收十六进制
tabBar最少设置2个，最 多5个
color: tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor: tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor: tab 的背景色，仅支持十六进制颜色
borderStyle: tabbar 上边框的颜色， 仅支持 black / white
position: tabBar 的位置，仅支持 bottom / top
list中的iconPath: 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
list中的selectedIconPath： 选中时的图片路径
"tabBar": { "color": "#f96677", "selectedColor":"#567788", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath":"/images/icon1.jpg", "selectedIconPath":"/images/icon2.jpg" }, { "pagePath": "pages/list/list", "text": "列表" }, { "pagePath": "pages/detail/detail", "text": "详情" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] }八.小程序其它配置文件 （了解）
![[a80e5e2d-14a1-46ac-b6b3-90f57e17a176.png]]
![[a4e8fe5b-cf70-4092-a4b1-8fc9dad27f00.png]]
九.小程序app.js
App() : 注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用，必须调用且只能调用一次。
常用生命周期函数：
onLaunch ： 监听小程序初始化。 onShow： 监听小程序启动或切前台。 onHide： 监听小程序切后台。
globalData: 定义全局数据
getApp() : 只用在page页中，获取到小程序全局唯一的 App 实例
// 获取： const app = getApp() console.log(app.globalData.属性) // 设置： app.globalData.属性 = 新值![[c604f46f-f23b-489c-816d-cca05266c674.png]]
十.小程序app.wxss
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
全局样式
与 CSS 相比，WXSS 扩展的特性有： （1）尺寸单位（2）样式导入
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。 （iconfont.css要改为iconfont.wxss）
注意：引入iconfont的时候，如果样式中有引入ttf的路径地址【相对的路径】，不能使用的；需要引入在线的ttf【字体】的路径地址
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
