使用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 相关文章推荐
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
js异常捕获方法介绍
Apr 10 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
详解JavaScript 的执行机制
Sep 18 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更快的提供文件下载的代码
2012/06/13 PHP
php学习之function的用法
2012/07/14 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
python如何爬取动态网站
2020/09/09 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
如何设置Java的运行环境
2013/04/05 面试题
入党申请人的自我鉴定
2013/12/01 职场文书
鉴定评语大全
2014/05/05 职场文书
高考励志标语
2014/06/05 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers