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

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

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,下载好后一步一步安装即可



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

20200814225128741.png


新建一个项目

20200814225618670.png

主要字段说明


AppID:小程序的唯一标识,需要申请,开发阶段可以使用测试号。

后端服务:提供了数据库、存储等完整的云端支持,用于服务器端开发。

语言:支持ES6或TypeScript。

项目默认结构介绍

20200815012933865.png


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数组中的第一个页面。


2020081501462975.png


目录
相关文章
|
1月前
|
XML 小程序 前端开发
小程序制作教程
小程序制作教程
61 3
小程序制作教程
|
2月前
详细教程:扫码提交表单后,数据直接推送到企业微信、钉钉、飞书群聊
在草料制作的表单中,填表人扫码填写并提交数据后,这些信息可以立即通过企业微信、钉钉或飞书自动推送到相应的群聊中,实现即时共享和沟通,提升团队协作效率。
|
3月前
|
小程序 编译器 数据安全/隐私保护
小白保姆级教程:微信公众号开发,从0到1
【8月更文挑战第8天】小白保姆级教程:微信公众号开发,从0到1
241 3
小白保姆级教程:微信公众号开发,从0到1
|
4月前
|
小程序 PHP
全新UI自助图文打印系统小程序源码 PHP后端 附教程
全新UI自助图文打印系统小程序源码 PHP后端 附教程
274 2
|
4月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
409 0
|
4月前
|
小程序
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
603 0
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
|
4月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
252 0
|
4月前
|
小程序
【微信小程序-原生开发】实用教程21 - 分包
【微信小程序-原生开发】实用教程21 - 分包
373 0
|
4月前
|
小程序 C++
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
76 0
|
4月前
|
小程序
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
65 0