使用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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
nodejs实现简单的gulp打包
2017/12/21 NodeJs
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
javascript将非数值转换为数值
2018/09/13 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
python中字符串前面加r的作用
2015/06/04 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
合作投资意向书
2014/04/01 职场文书
领导干部作风建设总结
2014/10/23 职场文书
财务总监岗位职责
2015/02/03 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
python基础之类方法和静态方法
2021/10/24 Python