前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序从入门到入土教程(01)

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

作者头像
海拥
发布2021-08-23 16:27:12
6250
发布2021-08-23 16:27:12
举报
文章被收录于专栏:全栈技术

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

相关内容:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/08/15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.小程序简介
  • 2.微信小程序的发布流程
相关产品与服务
访问管理
访问管理(Cloud Access Management,CAM)可以帮助您安全、便捷地管理对腾讯云服务和资源的访问。您可以使用CAM创建子用户、用户组和角色,并通过策略控制其访问范围。CAM支持用户和角色SSO能力,您可以根据具体管理场景针对性设置企业内用户和腾讯云的互通能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档