微信小程序基础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,则默认为所有页面都允许被索引;所谓的索引也就是,你的小程序发布后,用户可以在微信内进行小程序搜索,索引信息有助于用户的搜索。

在这里插入图片描述

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

猜你喜欢

转载自blog.csdn.net/weixin_42190844/article/details/108455567
今日推荐