使用 apifm-wxapi 快速开发小程序
前言
我们要开发小程序,基本上都要涉及到以下几个方面的工作:
- 购买服务器,用来运行后台及接口程序;
- 购买域名,小程序中需要通过域名来调用服务器的数据;
- 购买 SSL 证书,小程序强制需要 https 的地址,传统无证书不加密的 http 请求微信不支持;
- 后台程序员开发后台程序,这样才能登录后台进行商品管理、订单维护、资金财务管理等等;
- 后台程序员开发小程序可用的 restfull api 接口或者是 websocket 接口;
- 开发的后台及接口程序的安全性、功能性、稳定性测试,bug调试完毕;
- UI 设计师设计精美的小程序界面;
- 前端工程师根据 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 项目” 《创建 HelloWorld 项目》
接下来,我们来开始安装:
第一步: npm 安装模块
打开你的终端 (Windows 系统为那个 黑乎乎的 DOS 窗口, mac 系统大家都懂什么叫终端啦~ )
在终端输入命令进入你的小程序根目录:
cd /Users/gooking/WeChatProjects/helloworld
注意:这里我的小程序根目录路径是 /Users/gooking/WeChatProjects/helloworld ,你需要根据你自己的实际情况操作
npm install apifm-wxapi
运行完毕后,恭喜你! 你已经成功安装 “apifm-wxapi” 插件
第二步:构建 npm
如何使用 “apifm-wxapi” ?
“apifm-wxapi” 的功能大概有几百个,大家可以以后有空慢慢的去看,一个一个去尝试,功能说明文档:
https://github.com/gooking/apifm-wxapi/blob/master/instructions.md
下面我来演示一个获取所有省份的功能,你就能体会到 “apifm-wxapi” 的魅力,掌握使用它将是多么有趣的一件事情:
先做一个小小的设置:
因为微信小程序对于api接口请求需要做域名白名单设置,也就是说,接口请求域名必须要在你的小程序后台的安全设置里面加入白名单后才能调试;
为了我们测试方便,我们可以在开发工具上稍微设置一下,让开发工具暂时不做域名校验,会提高我们开发和调试的效率;
当然,正式上线之前,你还是需要把接口域名加入到你的小程序后台设置中(否则正式发布后,域名被拦截,用户都会看不到数据了~ 那就悲剧了…)
接下来,我们就可以开工了 ------>
第一步: 在需要的页面的 js 文件头部引入 apifm-wxapi
const WXAPI = require('apifm-wxapi')
第二步:直接调用 “apifm-wxapi” 提供的方法直接取数据
WXAPI.province().then(res => {console.log('请在控制台看打印出来的数据:', res)
})
两步搞定! 运行你的小程序,这就是见证奇迹的时刻!
来看几张截图:
关于更加详细的参数使用,以及更加高级的进阶使用方法,可以参考api接口文档说明:
《api接口文档》
修改 修改 二级域名 修改为自己的域名
还有需要注意的一个点就是!!!!
以引入轮播为例
js 文件中引入 “apifm-wxapi” 插件:
const WXAPI = require('apifm-wxapi')
WXAPI.init('gooking')
WXAPI.init('gooking')
这句代码是将你的小程序链接到你的后台,其中 gooking
这个是你的专属域名;
读取轮播图:
WXAPI.banners()
需要改成自己的域名!!!!
使用 apifm-wxapi 快速开发小程序相关推荐
- 如何快速创建程序组_如何快速开发小程序
随着小程序发展的越来越火,越来越多的企业.商家都开发了自己的小程序.在小程序开发的过程中,一部分客户会提出希望加快开发进度的要求.那么,如何快速开发小程序?下面不妨一起来了解一下. 选择成熟的小程序开 ...
- 快速开发小程序——案例
先看看小程序效果 (1)欢迎页 (2)首页:轮播头图,天气,豆瓣电影正在热映 (3)全国城市切换页 (4)天气详情页 (5)地图周边服务 (6)豆瓣电影 (7)热点新闻 (8)更多页面 3.开发准备: ...
- 微信公众平台接口调试工具json格式不对怎么搞_腾讯云和微信推出更快速的小程序开发平台,微信读书小程序作示范...
腾讯云副总裁刘颖将腾讯云定义为微信的一个助手,腾讯云面向微信生态开发者输出的技术解决方案包括"小程序·云开发".小程序音视频直播.小游戏联机对战引擎等,腾讯云与企业微信的合作也会在 ...
- 微信公众平台接口调试工具json格式不对怎么搞_腾讯云和微信推出更快速的小程序开发平台,微信读书小程序作了示范...
腾讯云副总裁刘颖将腾讯云定义为微信的一个助手,腾讯云面向微信生态开发者输出的技术解决方案包括"小程序·云开发".小程序音视频直播.小游戏联机对战引擎等,腾讯云与企业微信的合作也会在 ...
- 使用mpvue和wepy开发小程序
2019独角兽企业重金招聘Python工程师标准>>> 最近在开发小程序,分别使用了mpvue 和 wepy 这两个都是开发微信小程序的框架.都是牛人出品,给个赞! <!-- ...
- 【如何开发小程序】自己如何开发小程序?
在互联网如此发达的今天,小程序对商家和用户的优势是显而易见的,个人经验.小程序具有方便.方便.不占用内存.生产成本低等优点,如何开发小程序是企业需要知道的. 如何开发小程序?一.设计和制作 选择合适的 ...
- 【如何开发小程序?】如何快速开发一个小程序
在过去,对于新手来说,如何开发一个小程序只需要半个月到一个月的时间来制作一个简单的小程序.在中间,您需要了解小程序代码的逻辑语言.您需要查看微信官方平台开发文档中的大量示例和示例.那么现在如何开发 ...
- 黄荣奎:如何快速、便捷开发小程序
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 摘要:相信如今大家对微信小程序都不陌生,那么小程序实现的具体原则到底是怎样的,开发一个简单的小程序,我们需要做哪些东西,11月18日腾讯云技术 ...
- Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统 快速开发框架,开发小程序和APP的推荐框架!
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统 快速开发框架,开发小程序和APP的推荐框架! 概述 R ...
最新文章
- Python中Function(函数)和methon(方法)
- where is field waerk in pricing structure filled
- 直接使用汇编编写 .NET Standard 库
- 10-3的随笔继续讲,演绎“圆弧底”
- 将信息系学生的计算机文化学,计算机等级考试(国家)-关系数据库操作语言sql(四)...
- 显卡、显卡驱动、CUDA、CUDA Toolkit、cuDNN 梳理
- The Block披露员工持币情况,UNI等5个币种持有人数最多
- python判断点在矩形内_定义一个矩形和点的位置,判断点是否在矩形里面
- css 列表内容滚动,stroll.js 炫酷的 CSS3 列表滚动动画集合 - 文章教程
- swift中闭包的循环引用
- 项目申请html模板,做项目申请报告范文-有模板
- win10服务器只显示4g内存,要注意了,4G内存在win10系统中根本不够用
- 关于程序员的面试于自我介绍模板
- python : turtle 画一朵花
- 曲线行驶最后什么时候回正_曲线行驶出弯时什么时候回正方向
- 【离线语音专题②】安信可语音开放平台的使用——VC系列SDK的获取
- java 基础知识学习2
- 计算机的用户账户,电脑用户名_电脑用户名是什么
- Hyperledger Fabric网络节点架构
- TiDB:基于 Raft 的 HTAP 数据库