微信小程序基础01
近期会将整理的小程序学习笔记分享出来
1.官方小程序体验
2.环境准备
2.1注册
到微信公众平台进行注册。
2.2登录微信公众平台获取APPID
如果你微信账号下有多个小程序管理账号,在扫描二维码登录的时候,会让你选择需要登录的小程序。登录进去后,该界面相当于小程序的管理界面。包括信息设置,开发设置,运营数据,添加小程序体验者,将队友添加为开发者等,都可以在此进行操作。
2.3小程序助手的使用
“小程序助手” 是微信公众平台发布的官方小程序,旨在帮助小程序相关成员在手机端更方便、及时地管理小程序,扫描下方小程序码即可立即体验。(意味着,当你需要进行一些简便的小程序管理的时候,可以在手机端直接进行,无需使用微信公众平台)
2.4开发工具下载安装与使用
编写小程序项目,可以使用微信开发者工具,VSCODE。个人比较推崇微信官方开发的微信开发者工具,现在功能已经很完善,编写代码也丝滑,因人而异,选择适合自己的开发工具即可。(ps:建议下载稳定版。)
微信开发者工具下载地址:
微信开发者工具
第一次登陆需要扫码登陆
新建项目需要填入上一步注册小程序获取到的APPID。小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。
注意,请勾选“不使用云服务”
。微信小程序的开发有原生模式和云开发模式,是两种不同的开发模式。即使你要使用云开发,也不建议直接勾选“小程序·云开发”,会为你生成许多不必要的例子文件,可以先选择不使用云服务,后期如有需要再进行开通云开发。
2.5 调整界面的样式、字体大小
在顶部工具栏的设置里面的通用设置。根据自己的喜好进行调整。
3.小程序结构目录
⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。
⼩程序框架提供了⾃⼰的视图层描述语⾔WXML和WXSS,以及JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
3.1⼩程序⽂件结构和传统web对⽐
3.2基本的项⽬⽬录
project.config.json 项目配置文件的内容,是与详情中基本信息,本地设置勾选的内容是一样的。
在开发中,记得勾选 “不校验合法域名”
,否则你在用到其他服务时,是需要到微信公众平台进行合法域名配置的。
开发->开发设置->服务器域名
4.小程序的配置文件
4.1全局配置app.json
小程序根目录下的 app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/index",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
]
}
4.2app.json重点配置项
1.pages
⸺⽤于描述当前⼩程序所有⻚⾯路径,这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。
在pages数组里新增一条界面路径数据,保存后,会自动生成对应的界面文件,无需手动去新建。ps:这是微信开发者工具的特性,假如你使用的是VSCODE,那么便不会有效果。
2.window
⸺定义⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊定义等。
3.完整的配置信息请参考app.json配置
4.entryPagePath
指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填,将默认为
pages列表的第一项。不支持带页面路径参数。
{"entryPagePath":"pages/index/index"}
5.tabBar
底部 tab栏的表现
6.plugins
使用到的插件
7.permission
小程序接口权限相关设置
8.style
指定使用升级后的weui样式我们在使用一些组件库的时候,一般会去掉这一行。
4.3⻚⾯配置page.json
这⾥的page.json其实⽤来表⽰⻚⾯⽬录下的page.json这类和⼩程序⻚⾯相关的配置。开发者可以独⽴定义每个⻚⾯的⼀些属性,如顶部颜⾊、是否允许下拉刷新等等
。⻚⾯的配置只能设置app.json中部分window配置项的内容,⻚⾯中配置项会覆盖app.json的window中相同的配置项。
4.4sitemap 配置
小程序根目录下的 sitemap.json文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有
sitemap.json,则默认为所有页面都允许被索引;所谓的索引也就是,你的小程序发布后,用户可以在微信内进行小程序搜索,索引信息有助于用户的搜索。
配置的属性有很多,详细的信息需要查看官方文档