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

1,328 阅读5分钟

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. 完成小程序开发后,提交代码至微信团队审核,审核通过后即可发布(公测期间不能发布)。

==账号申请==

注册网址:mp.weixin.qq.com/wxopen/ware… 在这里插入图片描述 根据提示按照步骤注册即可

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

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

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

下载地址: developers.weixin.qq.com/miniprogram… 稳定版 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数组中的第一个页面。

在这里插入图片描述


相关文章

更多相关文章及我的联系方式我放在这里:gitee.com/haiyongcsdn…

最后,不要忘了❤或📑支持一下哦