微信小程序从入门到入土教程(01)

举报
海拥 发表于 2021/11/25 16:33:44 2021/11/25
【摘要】 🌊 作者主页:海拥🌊 简介:🏆CSDN全栈领域优质创作者、🥇HDZ核心组成员、🥈蝉联C站周榜前十🌊 粉丝福利:粉丝群 每周送六本书,不定期送各种小礼品 1.小程序简介微信小程序:是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,可以理解为使用微信平台开发的app。小程序是混合开发模式的一种具体实现。通过wxml(类似与H5)与wxss(类似于css)构建页面的渲...

🌊 作者主页:海拥
🌊 简介:🏆CSDN全栈领域优质创作者、🥇HDZ核心组成员、🥈蝉联C站周榜前十
🌊 粉丝福利:粉丝群 每周送六本书,不定期送各种小礼品

1.小程序简介

微信小程序:是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,可以理解为使用微信平台开发的app。

  • 小程序是混合开发模式的一种具体实现。
  • 通过wxml(类似与H5)与wxss(类似于css)构建页面的渲染。
  • 通过逻辑控制层(类似于vue中的view-model)控制数据逻辑。
  • 底层通过封装实现了硬件设备调用(例如wifi、蓝牙等)。
  • 提供了微信登录、离线缓存等通用接口。

微信小程序的特点:

  1. 更强大的能力
  2. 原生的体验
  3. 易用且安全的微信数据开放
  4. 高效和简单的开发

​小程序与网页开发的主要开发语言是 JavaScript,从网页开发迁移到小程序的开发成本并不高,但是二者还是有些许区别的。

  1. 网页开发者可以使用DOM,但小程序开发以逻辑层控制为主,缺少dom与bom接口
  2. 网页开发的兼容性主要针对浏览器,但小程序的兼容性主要考虑IOS、Android的微信客户端。
  3. 网页开发仅需要使用浏览器以及相关的开发工具,但微信小程序开发需要经过申请账号、下载专用开发工具等步骤。

其他小程序的介绍:
在这里插入图片描述
微信小程序与百度小程序对比

入口不同:微信碎片化,百度中心化。
能力不同:微信强社交,百度重AI。
开放不同:微信封闭式,百度全开放。


2.微信小程序的发布流程

  1. 在微信公众平台注册小程序,完成注册后可以同步进行信息完善和开发。
  2. 填写小程序基本信息,包括名称、头像、介绍及服务范围等。
  3. 完成小程序开发者绑定、开发信息配置后,开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。
  4. 完成小程序开发后,提交代码至微信团队审核,审核通过后即可发布(公测期间不能发布)。

==账号申请==

注册网址:https://mp.weixin.qq.com/wxopen/waregister?action=step1
在这里插入图片描述
根据提示按照步骤注册即可

==开发者工具的下载与安装==

微信开发者工具:集成了公众号网页调试和小程序调试两种开发模式。

  • 使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK 详情
  • 使用小程序调试,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

下载地址:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
稳定版 Stable Build (1.03.2006090):测试版缺陷收敛后转为稳定版
预发布版 RC Build (1.03.2007151):预发布版,包含大的特性;通过内部测试,稳定性尚可
开发版 Nightly Build:用于尽快修复缺陷和敏捷上线小的特性;开发自测验证,稳定性欠佳
在这里插入图片描述
这里我选的是稳定版Windows64,下载好后一步一步安装即可

在这里插入图片描述
在登录页,可以使用微信扫码登录开发者工具,开发者工具将使用这个微信帐号的信息进行小程序的开发和调试,此时获取的账号信息为扫码的微信账号。

在这里插入图片描述
==新建一个项目==
在这里插入图片描述
主要字段说明

  • AppID:小程序的唯一标识,需要申请,开发阶段可以使用测试号。
  • 后端服务:提供了数据库、存储等完整的云端支持,用于服务器端开发。
  • 语言:支持ES6或TypeScript。

项目默认结构介绍
在这里插入图片描述

  • pages:页面根目录,建议页面以文件目录为独立保存单位。

  • utils:系统推荐的工具目录

  • app.js:全局逻辑控制层,用于声明全局数据属性,系统登录或升级处理等业务逻辑

  • app.json:小程序全局配置文件,用于输入全局窗口配置,路由配置等。

  • app.wxss:小程序全局样式文件。

  • project.config.json:项目配置文件,保存项目开发的个性化配置

  • sitemap.json:通知搜索引擎检索当前小程序时包含哪些内容。

新建一个test文件夹,文件夹下建一个test目录,会显示出如下图的结构

在这里插入图片描述
新建test后的文件组成:

  1. test.wxml:页面dom结构。
  2. test.json:页面配置。
  3. test.wxss:页面样式。
  4. test.js:页面的逻辑控制层。

页面路由配置:小程序项目中的每一个显示页面都需要在app.json中配置页面的访问路径(路由)

  • 页面之间的切换与跳转需要与路由相同的路径进行访问。
  • 新建页面后,IDE自动在app.json中生成了当前页面的路由配置。
  • 小程序的首页默认为pages数组中的第一个页面。

在这里插入图片描述


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。