个人开发者的福利

微信小程序,刚听到这个新名词的时候,我就兴冲冲的去找入口,看看自己能不能搞个微信小程序的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. 为什么亚马逊云计算中的DNS服务叫Route53?

    最近在用亚马逊的云计算服务,看到它的DNS服务的名字叫做"Route 53".这个名字让我很好奇,为什么叫"Route 53"呢?有什么特殊含义? 看到了这个Q ...

  2. 2017年2月16日 分析下为什么spring 整合mybatis后为啥用不上session缓存

    因为一直用spring整合了mybatis,所以很少用到mybatis的session缓存. 习惯是本地缓存自己用map写或者引入第三方的本地缓存框架ehcache,Guava 所以提出来纠结下 实验 ...

  3. Javascript 闭包与高阶函数 ( 一 )

    上个月,淡丶无欲 让我写一期关于 闭包 的随笔,其实惭愧,我对闭包也是略知一二 ,不能给出一个很好的解释,担心自己讲不出个所以然来. 所以带着学习的目的来写一写,如有错误,忘不吝赐教 . 为什么要有闭 ...

  4. 一个Python小白5个小时爬虫经历

    前言 最近业余在做一个基于.NET Core的搜索项目,奈何基层代码写好了,没有看起来很华丽的数据供测试.很巧的也是博客搜索,于是乎想到了博客园.C#也能做做页面数据抓取的,不过在博客园看到的大部分都 ...

  5. BZOJ 3564: [SHOI2014]信号增幅仪(随机增量法)

    如果是个圆的话好办,如果是拉成椭圆呢?直接压回去!!! 然后随机增量法就行了 CODE: #include<cstdio> #include<iostream> #includ ...

  6. 纪中集训 Day1

    今天早上起来吃饭,发现纪中伙食真的是太差了!!!什么都不热,早餐的面包还好,然后就迎来了美好的早晨= = 早上做一套题,T1T2果断秒,T3一看就是noi原题,还好看过题解会写,然后就愉快的码+Deb ...

  7. 如何发布第一个WP8.1程序(VisualStudio2015)

    学习WP开发有一段时间了,近一个月开始着手开发程序,并在开发程序中不断地学习(有一定的基础后,边开发程序,边学习是很好的,能练习运用所学的知识,并能在遇到问题后上网上资料不断地学习,很有效果,因为老是 ...

  8. Radis安装

    基本知识 1.Redis的数据类型: 字符串.列表(lists).集合(sets).有序集合(sorts sets).哈希表(hashs) 2.Redis和memcache相比的独特之处: (1)re ...

  9. Abp zero 3.0.1发布

    v3.1.0 (2017-02-14) Angular 2.x UI Angular 2 AOT (Ahead Of Time) Compilation, and HMR (Hot Module Re ...

  10. 【疑问】css

    1.p{float:left}好像意思是p后面的元素往左浮动的意思啊!!2.ff下,button的文字好像没法垂直居中2.1 button垂直对齐,其line-height似乎需要减2px(依边框宽度 ...