1.小程序简介
微信小程序:是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,可以理解为使用微信平台开发的app。
小程序是混合开发模式的一种具体实现。
通过wxml(类似与H5)与wxss(类似于css)构建页面的渲染。
通过逻辑控制层(类似于vue中的view-model)控制数据逻辑。
底层通过封装实现了硬件设备调用(例如wifi、蓝牙等)。
提供了微信登录、离线缓存等通用接口。
微信小程序的特点:
更强大的能力
原生的体验
易用且安全的微信数据开放
高效和简单的开发
小程序与网页开发的主要开发语言是 JavaScript,从网页开发迁移到小程序的开发成本并不高,但是二者还是有些许区别的。
网页开发者可以使用DOM,但小程序开发以逻辑层控制为主,缺少dom与bom接口
网页开发的兼容性主要针对浏览器,但小程序的兼容性主要考虑IOS、Android的微信客户端。
网页开发仅需要使用浏览器以及相关的开发工具,但微信小程序开发需要经过申请账号、下载专用开发工具等步骤。
微信小程序与百度小程序对比
入口不同:微信碎片化,百度中心化。
能力不同:微信强社交,百度重AI。
开放不同:微信封闭式,百度全开放。
2.微信小程序的发布流程
在微信公众平台注册小程序,完成注册后可以同步进行信息完善和开发。
填写小程序基本信息,包括名称、头像、介绍及服务范围等。
完成小程序开发者绑定、开发信息配置后,开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。
完成小程序开发后,提交代码至微信团队审核,审核通过后即可发布(公测期间不能发布)。
账号申请
注册网址: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后的文件组成:
test.wxml:页面dom结构。
test.json:页面配置。
test.wxss:页面样式。
test.js:页面的逻辑控制层。
页面路由配置:小程序项目中的每一个显示页面都需要在app.json中配置页面的访问路径(路由)
页面之间的切换与跳转需要与路由相同的路径进行访问。
新建页面后,IDE自动在app.json中生成了当前页面的路由配置。
小程序的首页默认为pages数组中的第一个页面。