微信小程序开发入门与实战(初始微信小程序)

简介: 微信小程序开发入门与实战(初始微信小程序)

👨‍🦲小程序开发简介


说明:小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。

👨‍🦲小程序 VS 网页开发


运行环境不同:网页运行在浏览器环境中 、小程序运行在微信环境中。


API 不同由于运行环境的不同:所以小程序中,无法调用 DOM 和 BOM 的 API。但是,小程序中可以调用微信环境提供的各种 API,例如: 地理定位、 扫码、支付……


开发模式不同


网页的开发模式:浏览器 + 代码编辑器(VsCode)

小程序有自己的一套标准开发模式:申请小程序开发账号、安装小程序开发者工具、创建和配置小程序项目

👨‍🦲创建一个小程序


👨‍🦲注册小程序开发账号


👉 注册链接

注册步骤:右上角注册 👉 选小程序 👉 填写相关信息 👉 打开邮箱激活账号(主体类型选择个人) 👉 保存自己AppID(查找如 👇)

image.png

👨‍🦲开发工具安装下载


下载链接 👉 🔗🔗🔗

安装步骤 👉

image.png

👨‍🦲项目的构造


  • 基本祖成结构
  1. 了解项目的基本组成结构

image.png

小程序页面的组成部分(MVC思想类型)


🐕每个页面由 4 个基本文件组成,它们分别是:


① .js 文件(页面的脚本文件,存放页面的数据、事件处理函数等)

② .json 文件(当前页面的配置文件,配置窗口的外观、表现等)

③ .wxml 文件(页面的模板结构文件)

④ .wxss 文件(当前页面的样式表文件)


JSON 配置文件的作用

JSON 是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现。小程序项目中也不例外:通过不同的 .json 配置文件,可以对小程序项目进行不同级别的配置。


小程序项目中有 4 种配置文件 json,分别是:

image.png

image.png

☆ app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。

1.png

简单了解下这 4 个配置项的作用:


1、 pages:用来记录当前小程序所有页面的路径

2、 window:全局定义小程序所有页面的背景色、文字颜色等

3、 style:全局定义小程序组件所使用的样式版本

4、 sitemapLocation:用来指明 sitemap.json 的位置

image.png

☆ project.config.json 是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置 如:setting 中保存了编译相关的配置、projectname 中保存的是项目名称、 appid 中保存的是小程序的账号 ID……

image.png

1、微信现已开放小程序内搜索,效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引。

2、当开发者允许微信索引时,微信内会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。


3、 关闭索引 sitemap.json 👉 action “disallow”


注意 ❗:sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件project.config.json 的 setting 中配置字段 checkSiteMap 为 false

image.png

🐕小程序中的每一个页面,可以使用 .json 文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json 的 window 中相同的配置项。例如

image.png

  • 新建小程序页面

新建方法 👉 只需要在 app.json -> pages 中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件。

创建效果如下:

7.gif

  • 修改项目首页

效果效果如下:

8.gif

最后


image.png

下篇文章再见ヾ( ̄▽ ̄)ByeBye

image.png

相关文章
|
2天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
13 0
|
2天前
|
小程序 Java 编译器
性能工具之JMeter 微信小程序 WebSocket 脚本入门
【5月更文挑战第12天】性能工具之JMeter 微信小程序 WebSocket 脚本入门
8 1
|
2天前
|
小程序 测试技术 API
外卖小程序实战-接单后小票机自动打印订单
外卖小程序实战-接单后小票机自动打印订单
14 0
|
2天前
|
小程序 Java API
微信小程序和springboot实现微信支付
微信小程序和springboot实现微信支付
11 0
|
2天前
|
小程序
外卖小程序实战
外卖小程序实战
10 0
|
2天前
|
小程序 API
微信小程序-微信支付
微信小程序-微信支付
7 0
|
2天前
|
小程序
开发小程序只要几百块?
开发小程序只要几百块?
22 0
|
2天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
13 1
|
2天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
2天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。

热门文章

最新文章