欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序基础01

程序员文章站 2024-02-13 10:37:22
...

近期会将整理的小程序学习笔记分享出来


1.官方小程序体验

微信小程序基础01


2.环境准备

2.1注册

到微信公众平台进行注册。
微信小程序基础01

2.2登录微信公众平台获取APPID

如果你微信账号下有多个小程序管理账号,在扫描二维码登录的时候,会让你选择需要登录的小程序。登录进去后,该界面相当于小程序的管理界面。包括信息设置,开发设置,运营数据,添加小程序体验者,将队友添加为开发者等,都可以在此进行操作。
微信小程序基础01

2.3小程序助手的使用

“小程序助手” 是微信公众平台发布的官方小程序,旨在帮助小程序相关成员在手机端更方便、及时地管理小程序,扫描下方小程序码即可立即体验。(意味着,当你需要进行一些简便的小程序管理的时候,可以在手机端直接进行,无需使用微信公众平台)
微信小程序基础01

微信小程序基础01

2.4开发工具下载安装与使用

编写小程序项目,可以使用微信开发者工具,VSCODE。个人比较推崇微信官方开发的微信开发者工具,现在功能已经很完善,编写代码也丝滑,因人而异,选择适合自己的开发工具即可。(ps:建议下载稳定版。)
微信开发者工具下载地址:
微信开发者工具

第一次登陆需要扫码登陆
微信小程序基础01
新建项目需要填入上一步注册小程序获取到的APPID。
小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。
注意,请勾选“不使用云服务”。微信小程序的开发有原生模式和云开发模式,是两种不同的开发模式。即使你要使用云开发,也不建议直接勾选“小程序·云开发”,会为你生成许多不必要的例子文件,可以先选择不使用云服务,后期如有需要再进行开通云开发。
微信小程序基础01
微信小程序基础01
微信小程序基础01

2.5 调整界面的样式、字体大小

在顶部工具栏的设置里面的通用设置。根据自己的喜好进行调整。
微信小程序基础01

微信小程序基础01

3.小程序结构目录

⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。
⼩程序框架提供了⾃⼰的视图层描述语⾔WXML和WXSS,以及JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

3.1⼩程序⽂件结构和传统web对⽐

微信小程序基础01

3.2基本的项⽬⽬录

微信小程序基础01
project.config.json 项目配置文件的内容,是与详情中基本信息,本地设置勾选的内容是一样的。
在开发中,记得勾选 “不校验合法域名”,否则你在用到其他服务时,是需要到微信公众平台进行合法域名配置的。
微信小程序基础01
开发->开发设置->服务器域名
微信小程序基础01



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,那么便不会有效果。
微信小程序基础01
2.window
⸺定义⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊定义等。
微信小程序基础01
3.完整的配置信息请参考app.json配置

4.entryPagePath
指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填,将默认为
pages列表的第一项。不支持带页面路径参数。

{"entryPagePath":"pages/index/index"}

5.tabBar
底部 tab栏的表现
微信小程序基础01
微信小程序基础01
微信小程序基础01
6.plugins
使用到的插件
7.permission
小程序接口权限相关设置
8.style
指定使用升级后的weui样式
我们在使用一些组件库的时候,一般会去掉这一行。

微信小程序基础01

4.3⻚⾯配置page.json

这⾥的page.json其实⽤来表⽰⻚⾯⽬录下的page.json这类和⼩程序⻚⾯相关的配置。开发者可以独⽴定义每个⻚⾯的⼀些属性,如顶部颜⾊、是否允许下拉刷新等等。⻚⾯的配置只能设置app.json中部分window配置项的内容,⻚⾯中配置项会覆盖app.json的window中相同的配置项。

微信小程序基础01

4.4sitemap 配置

小程序根目录下的 sitemap.json文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有
sitemap.json,则默认为所有页面都允许被索引;所谓的索引也就是,你的小程序发布后,用户可以在微信内进行小程序搜索,索引信息有助于用户的搜索。

微信小程序基础01

配置的属性有很多,详细的信息需要查看官方文档

相关标签: 小程序