1&:起步

一、申请账号: 点击 mp.weixin.qq.com/wxopen/ware… 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。 登录 mp.weixin.qq.com ,我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。

二、安装开发工具: 前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

三、创建第一个小程序: 新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,最后,勾选 "创建 QuickStart 项目" (注意: 你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在 IDE 预览你的第一个小程序。

四、编译预览: 点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小程序。

2&:代码构成

一、JSON配置: 【1】小程序配置 app.json app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

【2】工具配置 project.config.json 针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。

【3】页面配置 page.json  page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

二、WXML模板: 从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。

三、WXSS样式: WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

四、JS交互逻辑: 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。

3&:小程序逻辑

一、小程序的启动: 微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。这个配置说明在 QuickStart 项目定义了两个页面,分别位于 pages/index/index 和 pages/logs/logs 目录。而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页。整个小程序只有一个 App 实例,是全部页面共享的,更多的事件回调参考文档 注册程序 App 。

二、小程序的页面: Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子。在渲染完界面之后,页面实例就会收到一个 onLoad 的回调,你可以在这个回调处理你的逻辑。

三、组件: 小程序提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼合成自己的小程序。

四、API: 为了让开发者可以很方便的调起微信提供的能力,例如获取用户信息、微信支付等等,小程序提供了很多 API 给开发者去使用。

4&:发布前的准备

一、用户身份: 一个团队进行小程序的开发,那么团队成员的身份管理是很有必要的。管理员可在小程序管理后台统一管理项目成员(包括开发者、体验者及其他成员)、设置项目成员的权限,包括:开发者/体验者权限、登录小程序管理后台、开发管理、查看小程序数据分析等。 管理入口位于:小程序管理后台 - 用户身份 – 成员管理

二、预览: 使用开发工具可以预览小程序,帮助开发者检查小程序在移动客户端上的真实表现。点击开发者工具顶部操作栏的预览按钮,开发工具会自动打包当前项目,并上传小程序代码至微信的服务器,成功之后会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。

四、上传代码: 同预览不同,上传代码是用于提交体验或者审核使用的。点击开发者工具顶部操作栏的上传按钮,填写版本号以及项目备注,需要注意的是,这里版本号以及项目备注是为了方便管理员检查版本使用的,开发者可以根据自己的实际要求来填写这两个字段。 上传成功之后,登录小程序管理后台 - 开发管理 - 开发版本 就可以找到刚提交上传的版本了。可以将这个版本设置 体验版 或者是 提交审核。

五、小程序的版本: 开发版本:使用开发者工具,可将代码上传到开发版本中。 开发版本只保留每人最新的一份上传的代码。点击提交审核,可将代码提交审核。开发版本可删除,不影响线上版本和审核中版本的代码。 审核中版本:只能有一份代码处于审核中。有审核结果后可以发布到线上,也可直接重新提交审核,覆盖原审核版本。 线上版本:线上所有用户使用的代码版本,该版本代码在新版本代码发布后被覆盖更新。

5&:上线

一、提交审核: 为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过审核的。在开发者工具中上传了小程序代码之后,登录 小程序管理后台 - 开发管理 - 开发版本 找到提交上传的版本。在开发版本的列表中,点击 提交审核 按照页面提示,填写相关的信息,即可以将小程序提交审核。需要注意的是,请开发者严格测试了版本之后,再提交审核, 过多的审核不通过,可能会影响后续的时间。

二、发布: 审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时登录 小程序管理后台 - 开发管理 - 审核版本。中可以看到通过审核的版本。请点击发布,既可发布小程序。

三、运营数据: 有两种方式可以方便的看到小程序的 运营数据: 方法一:登录 小程序管理后台 - 数据分析,点击相应的 tab 可以看到相关的数据。 方法二:使用小程序数据助手,在微信中方便的查看运营数据

微信小程序开发流程介绍相关推荐

  1. 【小程序】微信小程序开发流程

    文章目录 一.概述 二.整体开发架构 三.注册账号和安装开发工具 1)注册账号 1.注册方法 2.选择注册的帐号类型 3.填写邮箱和密码 4.激活邮箱 5.填写主体信息 6.登录后台补充信息 2)安装 ...

  2. 微信小程序开发流程的两种方法科普

    现在微信小程序早已渗透我们日常生活的方方面面,很多商家看到了小程序带来的巨大流量,也想开发一个自己的小程序.所以今天就跟大家科普下微信小程序开发流程,你会发现这个开发过程其实非常简单. 1. 在微信公 ...

  3. 小程序发布上线流程_微信小程序开发流程的两种方法科普

    现在微信小程序早已渗透到我们日常生活的方方面面,很多商家看到了小程序带来的巨大流量,也想开发一个自己的小程序.所以今天就跟大家科普下微信小程序开发流程,你会发现这个开发过程其实非常简单. 1. 在微信 ...

  4. 微信小程序登录流程+介绍wx.login和auth.code2Session

    微信小程序登录流程+介绍wx.login和auth.code2Session 几个核心API和核心字段 wx.login() 调用接口获取登录凭证(code) code2Session 登录凭证校验, ...

  5. ui测试怎么做?依据文档有哪些_微信小程序开发流程有哪些?各个环节注意事项...

    微信小程序开发流程有哪些?各个环节注意事项是什么?微信小程序开发有哪些注意事项,开发流程是怎样的?下面就一起来看看吧. 1.微信小程序开发之注册小程序 在开发小程序之前,首先就是要注册一个小程序.不过 ...

  6. 微信小程序开发工具介绍及安装(下)

    开发工具的基本功能介绍 微信小程序开发工具是一款强大的集成开发环境(IDE),旨在帮助开发者更便捷地创建.调试和发布微信小程序.它提供了丰富的功能和工具集,下面将对微信小程序开发工具的基本功能进行详细 ...

  7. 微信小程序开发工具介绍及安装(中)

    小程序开发工具的安装方法 微信小程序开发工具的安装方法相对简单,并且适用于多个操作系统平台.以下是关于Windows.macOS和Linux三个平台上安装微信小程序开发工具的步骤和注意事项的详细介绍. ...

  8. 微信小程序开发界面介绍

    这里是引用 主要是简单的介绍一下微信小程序开发界面的各个文件 先看下这个图片 这是最简单的目录了 pages: 所有的页面都要在这里面创建,在这里面创建的页面需要在app.json里面添加一下路径如下 ...

  9. 【数独】数独游戏-微信小程序开发流程详解

    有没有玩过数独游戏呢,听说,它是一个能训练大脑思维的棋盘类游戏,游戏规则很简单,通过小程序来实现很容易,非常适合对数独游戏逻辑感兴趣的同学,选择它开发入门吧. 准备 会使用微信开发者工具, 有Java ...

最新文章

  1. 怕了么?三年后,人工智能将彻底改变前端开发?
  2. matlab nurbs闭合曲面,nurbs_toolbox Matlab 非均匀有理B样条函数,能生成B 曲线和曲面 238万源代码下载- www.pudn.com...
  3. C# 实验三 判断一个字符、判断三角形、千名学生、a+aa+aaa+aaaa、求数列相加、约瑟夫环
  4. google提供的adb工具包_开源化学信息学工具包(Open Access Cheminformatics Toolkits)
  5. 前端学习(2027)vue之电商管理系统电商系统之实现省--市联动
  6. 四元数插值方法Slerp/Squad/Spicv/Sping知识总结思维导图
  7. 微信支付分使用用户数超2.4亿 每日使用笔数达千万级
  8. 青蛙的约会 数论 拓展欧几里德
  9. ConnectivityManager
  10. Android Activity防劫持方案
  11. wow修改人物模型_跪求WOW改人物模型和装备模型的工具
  12. 俄亥俄州立大学宣布开放 Swift 编程和 App 开发课程
  13. 实现mysql远程(通过IP地址访问)连接
  14. pygame之surface
  15. 语言-汉语-官话:官话
  16. PS 图像调整算法——饱和度调整
  17. IM开发技术学习:揭秘微信朋友圈这种信息推流背后的系统设计
  18. 软件构造习题课一的要点记录
  19. mysql启动报错,ERROR! The server quit without updating PID file (/var/lib/mysql/localhost.localdomain.pid
  20. scrapy框架开发爬虫实战——采集BOSS直聘信息【爬虫进阶】

热门文章

  1. 《城市大脑全球标准研究报告》发布会将于12月23号在北京举办
  2. 交叉科学部如何建?基金委:要做好这4点
  3. 成长与迁移,全球半导体格局演变
  4. 边缘计算将吞掉云计算!
  5. 信息技术守护人类文明DNA
  6. 上帝的指纹——分形与混沌
  7. 人工智能名人堂第54期 | 深度学习鼻祖:Geoffrey Hinton
  8. 周志华:最新实验表明gcForest已经是最好的非深度神经网络方法
  9. 开玩笑,我的代码会有问题 ?!
  10. 后浪优秀!21 岁小伙兼职程序员养家,大三存款达 6 位数