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

前言

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

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” 的功能大概有几百个，大家可以以后有空慢慢的去看，一个一个去尝试，功能说明文档：

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

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

先做一个小小的设置：

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

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

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

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

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

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

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

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

小程序代码

运行结果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序+云开发实现欢迎登录注册

    前段时间和同学一起做了一个小程序,用来参加学校的比赛,完成后把项目内容分割一下,贴到博客上面,算是学习记录和总结吧. 因为是学生党,而且并没有很大的需要,所以选择了微信小程序为开发者提供的"云开发"选项. 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 按照微信的说法: 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并

  • 微信小程序开发技巧汇总

    微信小程序开发技巧汇总

    1.全局变量的使用 每个小程序都需要在 app.js 中调用 App 方法注册小程序示例,绑定生命周期回调函数.错误监听和页面不存在监听函数等. 详细的参数含义和使用请参考 App 参考文档 . 整个小程序只有一个 App 实例,是全部页面共享的.开发者可以通过 getApp 方法获取到全局唯一的 App 示例,获取App上的数据或调用开发者注册在 App 上的函数. 我们在做小程序的时候往往需要大量的请求,而请求的域名也都是相同的,我们可以把域名储存到全局变量中,这样会方便后面请求域名的修改.

  • 微信小程序云开发修改云数据库中的数据方法

    小程序代码中无法直接修改他人创建的数据记录 例如:数据库表中的_openid字段是自动生成的,哪个用户创建的记录这个openid就是用户的openid,云数据库的权限分配也是根据openid来进行的. 解决方案: 第一步:创建云函数,在函数中编写修改数据库的操作代码 // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() const _ = db.command // 云

  • 详解基于Wepy开发小程序插件(推荐)

    开发 wepy-plugin-autopages 使用 wepy 开发项目时不需要手动配置 app.wpy 下的 config.pages,autopages 插件会自动监控 pages 目录下文件的变化,自动生成更新对应 app.json 下的 pages. 注意:该插件只会对编译文件dist里配置添加,源文件是不会改动的. 注意:我还发现有个问题是他是按命名顺序添加的,所以开发阶段可以用客户端指定路径,但是发布的话还是乖乖手动添加吧 这插件看情况使用吧,如果是个人项目的话我觉得还是值得用的,

  • 微信小程序+腾讯地图开发实现路径规划绘制

    现象 我们想用微信小程序实现在map>组件上自定义显示导航路径,但是目前为止官方并未给出相应的方法实现,map>组件确实有绘制点对点连线的属性polyline,但是呢我们没有一系列的坐标集合也是画不出一条路径的, 更糟糕的是即便你内置微信小程序JavaScript SDK,它目前为止也不能给你相应的返回导航路径中所有坐标集合方法实现,不信你看介绍 解决方案 那我们只能用WebService API咯, 但是不要高兴的太早,根据文档,我们要的接口参数是酱紫的 那么我们开始写(下面是菜鸡版代码,非

  • 详解如何在微信小程序开发中正确的使用vant ui组件

    微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr

  • 使用微信小程序开发弹出框应用实例详解

    view class="container" class="zn-uploadimg"> <button type="primary"bindtap="showok">消息提示框</button> <button type="primary"bindtap="modalcnt">模态弹窗</button> <button typ

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

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

    前言 我们要开发小程序,基本上都要涉及到以下几个方面的工作: 1.购买服务器,用来运行后台及接口程序: 2.购买域名,小程序中需要通过域名来调用服务器的数据: 3.购买 SSL 证书,小程序强制需要 https 的地址,传统无证书不加密的 http 请求微信不支持: 4.后台程序员开发后台程序,这样才能登录后台进行商品管理.订单维护.资金财务管理等等: 5.后台程序员开发小程序可用的 restfull api 接口或者是 websocket 接口: 6.开发的后台及接口程序的安全性.功能性.稳定

  • Python Flask 搭建微信小程序后台详解

    前言: 近期需要开发一个打分的微信小程序,涉及到与后台服务器的数据交互,因为业务逻辑相对简单,故选择Python的轻量化web框架Flask来搭建后台程序.因为是初次接触小程序,经过一番摸索和尝试,个人觉得的微信小程序与后台的交互有点像ajax,所以有ajax开发经验的同学开发小程序应该很容易上手,因为本文着重讲解后台程序的搭建,所以,微信小程序的前端开发将一笔带过,有兴趣学习小程序前端语言的同学可移步网易云课堂的一套快速入门课程<轻松玩转微信小程序>. 分三步讲解微信小程序与Python后台

  • 低代码从0到1创建小程序项目详解流程

    低代码从0到1创建小程序项目详解流程

    目录 1 搭建开发工具 2 创建项目 3 功能开发 4 后端实现 总结 我们使用代码编程的时候,前端是写标签,后端是写if/else.for循环来执行逻辑处理. 那低代码如何体系化的学习呢?这里我们按照代码方式学习做个对照. 1 搭建开发工具 一般如果我们使用微信开发者工具,开发小程序需要安装工具.低码工具不需要安装,是在线进行编程.但和开发者工具一样,低码也是需要绑定小程序的.我们在开发者工具里一般是需要配置自己小程序的appid,如果使用了云开发的,还需要开通云开发. 我们使用低码开发需要在

  • SpringBoot开发存储服务器实现过程详解

    目录 正文 基础环境 创建项目 添加Rest API接口功能(提供上传服务) 启动服务,测试API接口可用性 增加下载文件支持 文件大小设置 打包文件部署 正文 今天我们尝试Spring Boot整合Angular,并决定建立一个非常简单的Spring Boot微服务,使用Angular作为前端渲编程语言进行前端页面渲染. 基础环境 技术 版本 Java 1.8+ SpringBoot 1.5.x 创建项目 初始化项目 mvn archetype:generate -DgroupId=com.e

  • 微信小程序 video详解及简单实例

    微信小程序 video详解及简单实例

    微信小程序 video详解 在小程序火热的今天,作为IT行业的一员,我也来凑了一下热闹,话不多说了,接下来看看视频上传,和跨页面获取值的相关案例吧!! 视频上传部分代码: 视频播放 随机颜色的产生: 颜色页面的选择: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 如何用python GUI(tkinter)写一个闹铃小程序(思路详解)

    事情的起因是帮助一个朋友写一个程序,来控制他们单位的铃声,平时竟然是手动打铃(阔怕) 事情的第一步:理清思路.需要用到python的几个知识:1.tkinter一些函数控件,2.控件和函数之间的联系(主用TreeView控件),3.读写数据入txt文档(高级版可换为数据库),4.数据的类的封装. 需要其他方面的知识:1.简单设计界面布局,2.确保程序易于使用的不反人类细节. 考虑清楚后,那么我开始学习一下相关知识. (1)python中作为面向对象的一份子,Class(类)和Instance(实

  • Nest.js快速启动API项目过程详解

    目录 快速启动 使用nest自带的命令行工具 直接使用starter项目 用npm安装所需的包 创建controller 创建service 结构和命名 HTTP请求 处理Axios对象 配置 全局添加headers API文档 快速启动 最近上了一个新项目,这个客户管理一个庞大的任务和团队集群,而不同流程所适用的系统也不太一样,比如salesforce,hubspots之类的.这次的新项目需要在另外两个平台之间做一些事情.目前只需要先封装其中之一的API,因此我们选定使用NodeJS的框架Ne

  • Django 开发环境配置过程详解

    Django 开发环境配置过程详解

    开发环境 开发环境为: Win 10(64位) Python 3.7.0 Django 2.1 安装Python python的安装为比较简单,首先找到Python官方网站,选择python3.7的windows版本,下载并安装. 安装时注意勾选添加python到环境变量中.如果没有或者漏掉这一步,请安装完毕后自行添加. 若实在不知道怎么弄的,看这篇文章: windows上安装python3教程以及环境变量配置 安装完成后打开命令行,输入python -V,系统打印出python的版本号,说明安

  • 使用Vue开发自己的Chrome扩展程序过程详解

    前言 浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序.它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等. 好消息是浏览器扩展并不难写.可以用你已经熟悉的 Web 技术(HTML.CSS 和 JavaScript)创建 -- 就像普通网页一样.但是与网页不同的是,扩展程序可以访问许多特定于浏览器的 API,这才是有趣的地方. 在本教程中,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展.这个扩展程序的 JavaScript 部分,我

  • 微信小程序 框架详解及实例应用

    微信小程序 框架详解及实例应用

    快速了解微信小程序的使用,一个根据小程序的框架开发的todos app 微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,做了一个常规的todo app.这个app基于微信小程序的平台,实现了todo app的常规功能,同时为了让它更接近实际的工作场景,也用到了loading与toast这两个组件来完成一些操作的交互与反馈.这个平台给我的直观感受是

随机推荐