使用apifm-wxapi快速开发小程序过程详解


Posted in Javascript onAugust 05, 2019

前言

我们要开发小程序,基本上都要涉及到以下几个方面的工作:

1、购买服务器,用来运行后台及接口程序;

2、购买域名,小程序中需要通过域名来调用服务器的数据;

3、购买 SSL 证书,小程序强制需要 https 的地址,传统无证书不加密的 http 请求微信不支持;

4、后台程序员开发后台程序,这样才能登录后台进行商品管理、订单维护、资金财务管理等等;

5、后台程序员开发小程序可用的 restfull api 接口或者是 websocket 接口;

6、开发的后台及接口程序的安全性、功能性、稳定性测试,bug调试完毕;

7、UI 设计师设计精美的小程序界面;

8、前端工程师根据 UI 设计稿进行小程序开发、同时对接 api 接口完成最终小程序的开发;

所谓麻雀虽小五脏俱全,想想要开发一款负责任、运行稳定、数据安全有交代的小程序,也没有想象的那么容易吧?

或许许多人看到这里,已经倒吸了一口冷气了吧?  这。。。 太麻烦了吧?!有没有什么捷径可以走?!

回答是肯定的,那就是你可以在小程序中集成 “apifm-wxapi” 模块,实现快速开发......

什么是“apifm-wxapi”

借用 “apifm-wxapi” 官方的介绍来回答一下这个问题:

微信小程序云开发工具包,借此工具包,你将无需投入服务器、无需接口编程、无需开发后台,将传统开发小程序效率提升百倍 

“apifm-wxapi”  的 github 地址是:  https://github.com/gooking/apifm-wxapi

大家有兴趣的可以点击进去具体了解一下,不过今天我们先来看看在实际小程序开发中, “apifm-wxapi”  能帮我们解决什么问题?

回顾上面介绍的开发小程序的 8 个步骤,如果我们使用  “apifm-wxapi” ,那么我们只需要做:

1、购买服务器,用来运行后台及接口程序;

2、购买域名,小程序中需要通过域名来调用服务器的数据;

3、购买 SSL 证书,小程序强制需要 https 的地址,传统无证书不加密的 http 请求微信不支持;

4、后台程序员开发后台程序,这样才能登录后台进行商品管理、订单维护、资金财务管理等等;

5、后台程序员开发小程序可用的 restfull api 接口或者是 websocket 接口;

6、开发的后台及接口程序的安全性、功能性、稳定性测试,bug调试完毕;

7、UI 设计师设计精美的小程序界面;

8、前端工程师根据 UI 设计稿进行小程序开发、同时对接 api 接口完成最终小程序的开发;

我们只需要做 7 + 8 就可以了! 

怎么样? 是不是特别的方便? 信不信跟着我走一朝,你不服都不行!

现有小程序项目如何安装 “apifm-wxapi”  模块

首先你需要检查一下你的小程序项目是否支持 npm ,判断标准很简单,你看一下你的小程序根目录下有没有 “package.json” 这个文件,有这个文件,说明是支持的,没有这个文件,说明还不支持;

如果你的小程序项目还不支持 npm ,怎么办呢? 很简单,只要在根目录运行  npm init 命令就可以了;

具体操作,可以点击看这篇文章

接下来,我们来开始安装:

第一步: npm 安装模块打开你的终端 (Windows 系统为那个 黑乎乎的 DOS 窗口, mac 系统大家都懂什么叫终端啦~ )

在终端输入命令进入你的小程序根目录: 

cd /Users/gooking/WeChatProjects/helloworld

注意:这里我的小程序根目录路径是 /Users/gooking/WeChatProjects/helloworld ,你需要根据你自己的实际情况操作

npm install apifm-wxapi

运行完毕后,恭喜你! 你已经成功安装  “apifm-wxapi”  插件

第二步:构建 npm

点击微信小程序开发工具--> 工具 --> 构建 npm

使用apifm-wxapi快速开发小程序过程详解

如何使用 “apifm-wxapi” ?

“apifm-wxapi” 的功能大概有几百个,大家可以以后有空慢慢的去看,一个一个去尝试,功能说明文档:

https://github.com/gooking/apifm-wxapi/blob/master/instructions.md

下面我来演示一个获取所有省份的功能,你就能体会到 “apifm-wxapi”  的魅力,掌握使用它将是多么有趣的一件事情:

先做一个小小的设置:

因为微信小程序对于api接口请求需要做域名白名单设置,也就是说,接口请求域名必须要在你的小程序后台的安全设置里面加入白名单后才能调试;

为了我们测试方便,我们可以在开发工具上稍微设置一下,让开发工具暂时不做域名校验,会提高我们开发和调试的效率;

当然,正式上线之前,你还是需要把接口域名加入到你的小程序后台设置中(否则正式发布后,域名被拦截,用户都会看不到数据了~ 那就悲剧了......)

使用apifm-wxapi快速开发小程序过程详解

接下来,我们就可以开工了 

第一步: 在需要的页面的 js 文件头部引入  “apifm-wxapi” const WXAPI = require('apifm-wxapi')

第二步:直接调用 “apifm-wxapi” 提供的方法直接取数据你根本不用关心数据哪里来,要什么数据,直接拿就OK!

WXAPI.province().then(res => {
 console.log('请在控制台看打印出来的数据:', res)
})

两步搞定! 运行你的小程序,这就是见证奇迹的时刻!来看几张截图:

小程序代码

使用apifm-wxapi快速开发小程序过程详解

运行结果

使用apifm-wxapi快速开发小程序过程详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
基于vue.js实现购物车
Jan 15 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 #Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 #Javascript
JS 自执行函数原理及用法
Aug 05 #Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
Nuxt.js实战和配置详解
Aug 05 #Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 #Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 #Javascript
You might like
PHP 实现explort() 功能的详解
2013/06/20 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python定时执行之Timer用法示例
2015/05/27 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python实现电子产品商店
2019/02/26 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
培训科主任岗位职责
2014/08/08 职场文书
组工干部演讲稿
2014/09/02 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
推销搭讪开场白
2015/05/28 职场文书
nginx lua 操作 mysql
2022/05/15 Servers