微信小程序从注册账号到上架(图文详解)(2)

云函数最大的优势便是无需购买服务器,无需注册域名,并无需配置SSL证书,真正达到了开箱即用。
在cloudfunctions目录上又见新建nodejs云函数,即可创建一个新的云函数,其包含了两个文件:package.json、index.js

package.json为一个标准的npm包,index.js为云函数的主文件。下面是新建云函数的初始内容,可以看到其首先引入了wx-server-sdk,它为小程序提供了操作云数据库的能力,接着初始化云函数,export云函数内容。

// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } }

需要说明的是:云函数包含几乎完整的nodejs环境,因此一些常见的nodejs库如:requests、chreeio等都可以通过package.json添加,使用。

4. 为云函数添加功能

本文的小程序为SCI期刊影响因子查询的小程序,逻辑较为简单,后端仅需要提供一个期刊查询接口,为前端提供相应期刊的影响因子即可。

1.新建云函数http_get

2.引入相关类库。在终端中打开云函数http_get的目录,接着安装依赖库。由于此函数利用了第三方的查询接口,因此需要使用http请求库got和http解析库cheerio。具体操作如下

cd /path/to/your/cloudfunctions npm install //安装wx-cloud-server npm install got --save npm install cheerio --save

3.为函数添加功能。此处主要是加载相关类库,解析html,然后将结果编码为json返回客户端。

// 加载相关类库 const cloud = require('wx-server-sdk') const got = require('got') const querystring = require('querystring') const cheerio = require('cheerio') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() //sci影响因子查询接口 const sci_url = 'some url' //获取期刊名称 let sciname = event.sciname let querys = querystring.stringify({ q: sciname, sci: 1 }); //请求数据 let resp = await got(sci_url + String(querys)) //解析html const $ = cheerio.load(resp.body) const lists = $(".tb1 tr") //判断是否存在查询期刊 if (lists.children().length == 0) { return -1 }else{ let jounalLists = lists.map((i, item) => { return { //期刊编号 no: $(item).children().eq(0).text(), //省略部分内容,解析html参数 //影响因子解析 if: $(item).children().eq(7).text(), } }).get() return jounalLists //返回解析结果 } }

4.调试云函数。云函数的调试可以通过云端调试:IDE界面->云开发->云函数,选择相应的云函数即可进行调试。点击调试后即可返回调试结果,可以根据结果对函数进行修改。

云函数调试

微信小程序从注册账号到上架(图文详解)

云函数调试

微信小程序从注册账号到上架(图文详解)

同时也可以通过本地环境调试云函数:在cloudfunctions下相应函数文件夹点击“本地调试”即可进行调试,相比于云端调试,本地调试更加便捷,也无需每次调试前上传云函数到服务器。但需要注意的是:请在云函数目录下执行npm install完成相关类库安装,然后才能进行调试。

云函数调试

微信小程序从注册账号到上架(图文详解)

 

5. 添加小程序页面

小程序的每个页面都包含四个文件:.js、.json、.wxml、wxss。js负责程序逻辑、json配置页面参数、wxml定义页面结构、wxss定义页面样式。这就相当于将HTML页面拆分为.html、.css、.js。

由于小程序是运行在微信内的webview环境,因此其语法与html有所不同,可以参考官方文档:传送门

为了方便页面构建,本文引入了一个第三方类库:Vant,其提供了精美的界面元素,开箱即用,详细使用方法可以参见vant官方文档。

最终小程序主界面如下所示:

小程序界面

微信小程序从注册账号到上架(图文详解)

其对应的代码如下:

页面结构

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/167b90a3e9153544d5071f1cf342a9f2.html