个人开发者的福利

微信小程序,刚听到这个新名词的时候,我就兴冲冲的去找入口,看看自己能不能搞个微信小程序的HelloWorld,毕竟能在微信上把自己写的一些小工具跑起来还是满炫酷的。
没想,网上一查,当时还不支持个人开发者开发小程序。但是今天无意间看到公众号的上的头条,个人开发者也可以开发微信小程序了。

今天正好调休在家,就看了如何申请账号,搭建环境以及运行发布项目的。

申请账号

因为在微信公众号看到这条消息,想当然认为小程序应该在公众号里面,找了一通,除了在“开发者工具”->"开发者文档"->"其他文档"中看到有关小程序的介绍外,并没有其他更详细的信息了。
于是点开上图中的链接,才知道需要到注册。

注册的具体细节就不说了,官方有给详细的文档,点
注意:这里并不能直接用之前注册号的公众号的账户和密码,需要用一个之前没有注册过的邮箱来注册一个新的小程序的账号。

账号申请成功就可以登录,登录后的界面如下

环境搭建

按照上图的“小程序发布流程”的提示,依次完成每个步骤。

  • 小程序信息: 包括小程序的名称, 头像,介绍等信息
  • 小程序开发与管理
    • 开发工具:点击超链接,我选的是Mac版本,安装完后得到如下的小程序开发的IDE

    • 添加开发者:显然我是管理员,无需授权
    • 配置服务器:在小程序界面左下方有个“设置”选项,点击进入切换到“开发设置”可以看到有个AppID,这个ID可以用于后面发布以及搜索到你发布后的小程序
    • 帮助文档:自取
  • 版本发布: 这个链接中同时也有如何上传代码,预览你的小程序效果(因为我的手机版本太低,没办法预览)提交审核到最终发布等等。我今天提交的一个小程序现在还在审核状态~~~

实战

工具文档都有了,我们可以撸起袖子写代码了。印象中,有段时间在博客园中有看到不少同学些小程序的文章,悄悄搜了一把,确实不少,而且看做的效果都挺好的,既然这样我就没有必要造轮子了,毕竟一天的时间既要写代码又要调样式还是有点不够。
看了有多篇有关小程序的文章,并且开源了代码。于是我在豆瓣图书这个项目的基础上写了一个简易的快递查询小程序——快递一点通

  • 准备API
    找了一个可以查询快递的第三方网站,通过chrome浏览器的开发者工具看了下请求数据的过程,大致分为两步
    第一步:检测用户输入的快递单号,通过POST请求的方式向后台发送数据得到快递所属的快递公司
    (我仔细观察了下,只有当订单号超过5位的时候才会发送请求,另外如果输入很快,则不会输入一个数字就发送一个请求)

上图就是我在较慢输入的时候,每次输入都生成一个post请求。
这次请求主要是为了得到这个快递是来自哪家快递公司,因为在查询快递单号的时候你并不需要选在是顺丰还是圆通申通还是韵达等等。
在返回的结果中,我们可以得到快递公司的名称,类似这样

第二步:根据上一步得到的快递公司以及用户输入的快递单号查询快递详情
这次使用的是GET方式的请求,主要两个参数分别是快递公司的名称,就是上图中的comCode以及用户输入的快递单号。
得到的结果就是该快递单号对应的快递详情信息

  • 编写小程序
    有了上面的API接口,我们就可以把这些用到小程序中了。下面就是基于Oopsguy的豆瓣图书的小程序项目做了一个改动,使之从豆瓣图书搜索的小程序编变成查询快递信息的快递一点通小程序。

项目结构如下

其中分别对requests目录下的app.js以及request.jspages下的index做了改动。
得到效果如下

今天网络太卡了,先到这吧,算是尝鲜了。
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!如果您想持续关注我的文章,请扫描二维码,关注JackieZheng的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。

小程序新能力-个人开发者尝鲜微信小程序的更多相关文章

  1. 微信小程序详细图文教程-10分钟完成微信小程序开发部署发布

    很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现 ...

  2. 程序员的又一春,微信小程序带来的一个赚钱机遇

    微信小程序可能是原生的机遇,在程序员面对微信小程序的恐惧中说其实也是我们程序员创业的春天或者挣外快的一个机遇. 为什么这么说呢?且听我慢慢给你分析 成本角度 你想想,会ios开发的可能只会ios,会安 ...

  3. 微信小微商户申请入驻 .NET C#实现微信小微商户进件API

    微信小微商户申请入驻 .NET C#实现微信小微商户进件API官方小微商户专属接口文档 微信支付SDK 微信支付官方SDK与DEMO下载 图片上传 图片上传接口API文档 证书下载 证书下载接口API ...

  4. 微信小程序学习笔记(一)--创建微信小程序

    一.创建小程序 1.申请帐号.安装及创建小程序,请参照官方文档里面的操作 https://developers.weixin.qq.com/miniprogram/dev/. 小程序在创建的时候会要求 ...

  5. 小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名

    小程序点击跳转外部页面 1.index.wxml  添加点击事件   标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitat ...

  6. 前端微信小程序电影类仿淘票票微信小程序

    需求描述及交互分析设计思路和相关知识点电影界面顶部页签切换效果设计正在热映界面布局设计即将上映界面布局设计电影详情页设计我的界面列表导航设计登录设计 相关知识点(1)swiper滑块视图容器组件,可以 ...

  7. 小程序swiper效果高宽设置(微信小程序交流群:604788754)

    swiper的宽和高一定要设置在swiper上面.swiper-item默认继承swiper的宽和高.swiper-item容器里面的宽和高没有继承他的父节点宽和高,需要从新设置. 不明白之处,可以咨 ...

  8. AI人工客服开发 小程序智能客服 智能客服微信小程序 智能客服系统怎么做 如何设计智能客服系统

    今天我们就来给大家分享下如何做 小程序的智能客服问答系统. 首先请确保你的小程序在线客服已经开通使用,并使用代码自己对接好了,将客户的提问自动做了拦截,拦截到了你自己开发的接口上. 做好了拦截以后,我 ...

  9. 微信小程序“满月”:尝鲜之后你还用过它吗?

    距离 2017 年 1 月 9 日微信小程序上线,整整过去了一个月时间.和互联网时代每天出现的众多新鲜事物相似,小程序甫一诞生,立即占据了各大科技媒体网站头屏并引起社交圈的兴奋讨论.由于背靠微信,纷纷 ...

随机推荐

  1. DHCP协议

    来源摘取自百度百科 DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作, 主要有两个用途:给内部网络或网络服 ...

  2. C语言总结

    我们用了20天的时间左右的时间来学习简单的C语言,对于C语言,总体来说我是学的不是特别透彻,感觉自己什么都不懂一样.明天就要考试了,希望明天考个好成绩,为明年打下一个良好的基础. 这段时间我们学习了: ...

  3. FTP与TFTP

    文件传输协议如今有了很大的广泛,他屏蔽了计算机内部的实现细节,因为可以适用于各种计算机之间文件的传输. 文件咋网络中传输其实是一件很复杂的事情,涉及的问题有很多,比如 (1)计算机存储数据的格式不同 ...

  4. java常见文件操作

    收集整理的java常见文件操作,方便平时使用: //1.创建文件夹 //import java.io.*; File myFolderPath = new File(str1); try { if ( ...

  5. hibernate系列笔记(2)---Hibernate的核心API

    Hibernate的核心API 一般我们通过hibernate进行操作的时候,都会遵循下面的流程,那么接下来我对每一个步骤进行讲解: 1 public void testInsert() { 2 // ...

  6. CK editor 制作 ”小“plugin

    ckeditor 是什么? http://ckeditor.com/ 这工具里有大量他人写好的功能(plugin),如果要求不高,会找到的.但是我就是没有找到... 需求: ·自己制作一个小功能,可以 ...

  7. php和js中,utf-8编码转成base64编码

    1.php下转化base64编码 php中,文本文件的编码决定了程序变量的编码,比如以下代码在不同编码的php文件中,展示的效果也是不一样的 <?php $word = '严'; echo ba ...

  8. C#调用PB写的com组件dll

    背景 小编为了使用C#去模仿PB代码的加密算法,结果发现PB算法中,的long类型只有21亿,实际上传入的数值达到了78亿,造成了数据溢出,精度丢失的情况. 然而PB的算法已经使用C#不可以还原(C# ...

  9. R语言入门(二)基础语法

    1.help可以提供帮助,如help(nchar), help("[["),或者用?nchar也能获取帮助.example(nchar)可以获取到某个主题的使用方法. 2.ncha ...

  10. 又见Bug

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 作为一名开发者,如何解决遇到的问题.异常或Bug,是开发者必须要面对的,尽管问题很多,情况复杂,但还是有方法和技巧可寻的. 问题无非 ...