2017年1月9日,张小龙在2017微信公开课Pro上发布的小程序正式上线,一夜之间,小程序可谓家喻户晓,但通过接下来的几个月的观察,微信小程序并没有想象中的那么火爆。进入4月以来,微信小程序团队进行了多次发文调整,并放开了个人公众号快速注册小程序能力。不管未来如何,微信小程序已经在发力了,作为一名码农,咱还是先了解下小程序的开发流程及规范,以备不时之需!

  按照惯例,学习一门新技术或者新框架,咱们还是从官方提供的文档开始,于是找到微信小程序官方教程(https://mp.weixin.qq.com/debug/wxadoc/dev/)

  

  1、注册微信小程序账号

  按照文档指引,咱们得先注册一个微信下程序的账号,访问地址(https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN),选择“小程序”,按要求填写相关信息即可完成微信小程序的注册。(ps:微信严格区分个人公众号与小程序,因此微信小程序的注册邮箱不可以与微信个人公众号的邮箱相同)

  

  2、获取微信小程序的 AppID

  注册完成后登录,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID 。

  

  3、下载微信小程序开发者工具

  由于微信小程序的代码及规范相对封闭,因此按照微信官方的说法,为了帮助开发者简单和高效地开发微信小程序,推出了全新的开发者工具(https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html),集成了开发调试、代码编辑及程序发布等功能。

  4、创建demo项目

  下载完成后,选择创建“项目”,填入上一步获取到的AppID,设置本地项目的名称(非小程序名称),如:demo,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。

  为了方便上手,咱们先使用微信官方提供的样例源码(https://mp.weixin.qq.com/debug/wxadoc/dev/demo/quickstart.zip)。

  

  项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。

  5、手机预览

  开发者工具左侧菜单栏选择"项目",点击"预览",扫码后即可在微信客户端中体验。

  

  6、代码上传

  开发者工具左侧菜单栏选择"项目",点击"上传"即可将代码上传到微信小程序服务器。

  

  7、小程序发布

  登录微信公众平台并访问小程序首页(https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN),按要求完成第1步,填写小程序相关信息及用户身份信息(暂时可绑定5个开发者和10个体验者),然后点击第2步“前往发布”按钮,按要求填写小程序相关信息及版本信息即可提交审核。

  

  

  至此,微信小程序相关流程已经基本走完,接下来等待微信官方审核,然后与具体的微信公众号绑定即可进行访问。

  ps:关于微信小程序具体的代码编写及规范可详见微信官方的开发者文档,这里就不做详细介绍了。

----------------------------------------------------------------------------------------------------------------------------

ps:除了代码之外,咱还可以聊点别的,有兴趣可以关注我的个人微信公众号!

微信小程序开发流程的更多相关文章

  1. 商业版微信小程序开发流程

    一.产品阶段 ①功能规划思维导图——产品经理了解清楚整个项目需求,产出清晰明确的功能需求说明. ②需求报价预算——产品经理确定好功能需求后,输出整个项目开发的报价方案. ③组建技术开发团队——初步确认 ...

  2. 微信小程序开发简述

    微信小程序简述 什么是微信小程序? 微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用.全面开放 ...

  3. 微信小程序开发的基本流程

    微信小程序开发的基本流程 一,微信小程序简介 1,微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日. 2,微信小程序这个词可以分解为“微信”和“小程序 ...

  4. thinkphp开发微信小程序后台流程

    thinkphp开发微信小程序后台流程,简单分享一下微信开发流程 1,注册微信小程序账号 2,注册好后,登陆微信小程序,下载微信小程序开发工具 3,用thinkphp开发企业后台,前台数据用json返 ...

  5. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  6. 微信小程序开发之入门篇(熟悉开发工具)

    个人的每一篇博文都谈不上有什么技术含量,只是为了帮助不熟悉微信小程序开发的自己及他人提供一下思路.谢谢,下面开始! PS: 因为本人没有小程序的内测资格,所以所有的开发及Demo都是无AppId的,如 ...

  7. 微信小程序开发入门教程

    做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...

  8. 从零入手微信小程序开发

    前言: 哈哈,发现我写的随笔都是项目驱使的.当然,这篇也是项目驱使的咯,前段时间领导在玩微信时候发现了微信小程序的好处,流程,切换速度快等,然后就让小弟研究研究小程序的实现. 补充下,博客大多都是处理 ...

  9. 微信小程序开发《一》:阿里云tomcat免费配置https

    小狼咕咕最近开启了微信小程序开发的征程,由于微信小程序的前后台通信必须通过https协议,所以小狼咕咕第一件要做的事就是配置一个能够通过https访问的后台服务.小狼咕咕用的是阿里云ECS服务器,Li ...

随机推荐

  1. wamp虚拟服务器

    1.安装好wampServer 2.修改配置文件包含 vhosts 文件,操作: 打开apache的配置文件httpd.conf,并去掉#Include conf/extra/httpd-vhosts ...

  2. mybatis generator 插件安装及使用

    现在Mybatis特别火,但是在开发中却要经常写实体类和配置文件,会不会特别烦人,所以可以利用Mybatis的代码生成插件来生成这部分代码: 1,打开eclipse,点击Help>Softwar ...

  3. file_get_contents和curl对于post方式的解决办法

    post方式解决办法 其实很简单,我们只要仔细看看就知道了... file_get_contents: $content=$_POST['content'];$access_token=$_POST[ ...

  4. python之数据结构链表实现方式

    #!/usr/bin/env python # --------------------------------------- # author : Geng Jie # email : gengji ...

  5. ng指令控制一个元素的影藏的与显示几种方法的使用

    在ng中我们控制一个元素的显示与隐藏的方法: (1):ng-show=true/false 解释:ng-show使用的是display="block"/"none&quo ...

  6. Win7+CentOS双系统(一)

    注意:1.由于涉及到对硬盘操作,请妥善备份数据,避免损失. 2.为了达到每个步骤都有图片覆盖,我使用了虚拟机来进行测试,不过请大家放心,我已经在自己的物理机上成功实现了. 3.我的步骤是绝对正确和缺一 ...

  7. 基于MVC和Bootstrap的权限框架解决方案 一.搭建HTML

    因为某些原因,因为需要,最新要做一套客户管理系统,但是不满足于仅有的框架. 看了很多大牛写的框架,强大是强大,代码也太TM多了,乱七八糟话不多说,开始吧 随便在网上找到一套好看的HTML,看起来还不错 ...

  8. android中全局异常捕捉

    android中全局异常捕捉 只要写代码就会有bug,但是我们要想办法收集到客户的bug.有第三方bugly或者友盟等可以收集.但是,android原生就提供了有关收集异常的api,所以我们来学习一下 ...

  9. Git命令行和Xcode结合使用

    现在一直使用Git来管理代码,对于有强迫症的我来说,依旧选择了命令行,下面这段话可以更好的解释我为什么喜欢使用终端敲命令. There are a lot of different ways to u ...

  10. 自动获取代理IP信息的例子,含代码,分享哦,

    /// <summary> /// 读取URL数据内容 /// </summary> /// <param name="url">网址</ ...