自从微信小程序的功能发布以来,南京小程序开发一直在关注小程序的趋势。但是,由于工作繁忙,我没有太多时间去学习。现在逐渐研究了vuejs,并为其简单的设计所吸引。后来,他查看了小程序的开发文档,发现它们相似吗?也许这就是前端的发展趋势。每个框架趋于相似且设计出色。
之前的某一天,我突然感到一时兴起。我查看了我们中南部地区的数据统计,发现它仍然被某些人使用。没有促销,实际上增加了数百次访问(突然移动)。同时,我发现小程序支持云功能开发,也就是说,小程序不需要使用后端服务器,而是直接使用它提供的Node.js环境开发。
经过这些天的探索,
南京小程序开发我想分享将自己的小程序注册到架子上的整个过程,以供准备学习该小程序的学生参考,希望能够给到你帮助。
制备
1.注册微信小程序账户
单击门户立即注册微信小程序账户。点击进入,您将看到以下界面。选择注册类型时,需要选择微信小程序。然后填写相关信息以完成注册。注册后,切换到开发–>开发设置以查看开发者ID。
2.下载开发人员工具并创建新项目
进入门户网站,下载并安装最新的开发人员工具。使用开发人员工具,开发人员可以完成applet API和页面的开发和调试,代码查看和编辑,applet预览和发布以及其他功能。
有关IDE使用的接口,请参阅官方文档
然后打开开发人员工具,修改项目名称,填写上面的appid,然后后端服务选择applet云开发。
完成新项目后,我们可以看到ide帮助我们创建了一个新的applet模板,其中包括云功能开发,还提供了一些功能测试接口。
目前,我们尚未开放云开发。我们需要单击IDE左上角的“云开发”,然后选择打开云服务。
开发小程序
1.项目文件结构简介
该项目分为两个子文件夹,一个是cloudfunctions,其中包含applet的cloud功能,另一个是miniprogram,它是applet的前端文件夹,没有固定的文件夹格式,因此您可以自定义自己的文件夹通过修改app.json。有关具体文件的介绍,请参阅正式文件
2.修改小程序信息
在miniprogram文件夹中打开app.json,该文件夹定义了applet的基本信息。
以下是我的applet的app.json。我删除了示例中所有不相关的页面,并添加了主索引界面和详细信息页面。
关于修改示例项目:您可以直接删除页面目录中除index之外的所有页面,以及style和images文件夹中的所有文件。
{
"pages": [
"pages/index/index",
"pages/detail/index"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"Navigationbartitletext": "SCI if journal impact factor query 2019",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
3.创建一个新的云功能!
云功能的最大优势在于它不需要购买服务器,注册域名和配置SSL证书。它确实实现了开箱即用。
在cloudfunctions目录中,您可以通过创建一个新的nodejs云函数来创建一个新的云函数,其中包含两个文件:package.json和index.js
Package.json是标准的NPM软件包,而index.js是云函数的主要文件。以下是新云功能的初始内容。您可以看到它引入了wx-server-sdk,它为applet提供了操作云数据库的能力,然后初始化了云功能并导出了云功能的内容。
//Cloud function entry file
const cloud = require('wx-server-sdk')
cloud.init()
//Cloud function entry function
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
应该注意的是,云函数包含几乎完整的nodejs环境,因此可以通过package.json添加和使用一些常见的nodejs库,例如request和chreeio。
4.添加云功能的功能
本文的小程序是SCI期刊影响因子查询的小程序。逻辑相对简单。后端只需要提供日记查询界面即可为前端提供相应的日记影响因子。
新的云功能http_get
介绍相关的类库。在终端中打开Cloud函数,http_get然后安装依赖项库。由于此功能利用了第三方查询接口,因此需要使用HTTP请求库got和HTTP解析库cheerio。具体操作如下
cd /path/to/your/cloudfunctions
NPM install // install Wx cloud server
npm install got --save
npm install cheerio --save
向功能添加功能。这主要是加载相关的类库,解析HTML,然后将结果编码为JSON以返回到客户端。
//Load related class library
const cloud = require('wx-server-sdk')
const got = require('got')
const querystring = require('querystring')
const cheerio = require('cheerio')
cloud.init()
//Cloud function entry function
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
//SCI impact factor query interface
const sci_url = 'some url'
//Get journal name
let sciname = event.sciname
let querys = querystring.stringify({ q: sciname, sci: 1 });
//Request data
let resp = await got(sci_url + String(querys))
// parse HTML
const $ = cheerio.load(resp.body)
const lists = $(".tb1 tr")
//Judge whether there is a query Journal
if (lists.children().length == 0) {
return -1
}else{
let jounalLists = lists.map((i, item) => {
return {
//Journal number
no: $(item).children().eq(0).text(),
//Omit some content and parse HTML parameters
//Analysis of influence factors
if: $(item).children().eq(7).text(),
}
}).get()
Return jounallists // the parsing result is returned
}
}
调试云功能。可以通过云调试云功能:IDE界面>云开发>云功能。选择相应的云功能进行调试。单击“调试”,返回调试结果,并根据调试结果修改功能。
同时,还可以通过本地环境调试云功能:单击cloudfunctions下相应功能文件夹中的“本地调试”以进行调试。与云调试相比,本地调试更加方便,并且无需在每次调试之前将云功能上载到服务器。注意:请在云函数目录中执行在npm install调试之前完成相关类库的安装。
5.添加小程序页面
小应用程序的每个页面都包含四个文件.js:.json,.wxml,wxss, ,JS是负责程序逻辑,JSON配置页面参数,wxml定义页面结构,wxss定义页面样式。这等同于分裂HTML页面为.html,.css,.js。
由于小程序是在微信运行的WebView的环境中,它的语法与HTML不同。请参考官方文档:门户
为了方便页面构建,本文引入了第三方类库vant,它提供了精美的界面元素,可以直接使用。有关详细用法,请参阅vant的官方文档。
小程序的最终主界面如下:
相应的代码如下:
页面结构
<!--index.wxml-->
<view class='head_img'>
<van-cell-group custom-class="cell_group">
<van-field
custom-class="cell_filed"
value="{{ sciname }}"
Placeholder = "journal name / initials / abbreviations / ISSN"
border="{{ false }}"
focus="true"
bind:change="onValueChange"
/>
</van-cell-group>
</view>
<view class="container">
<view class="btn-area">
< van button type = "info" size = "large" round = "true" bind: Click = "onclickquery" loading = "{isquery}" "> query < / Van button >
</view>
<view wx:if="{{sci.length>0}}">
<van-cell-group>
<view wx:for="{{sci}}"wx:for-index="idx" wx:for-item="item" wx:key="idx">
<van-cell
value="{{item.if}}" border="false"
title-width="80%"
is-link link-type="navigateTo"
url="/pages/detail/index?id={{idx}}"/>
</view>
</van-cell-group>
</view>
</view>
页面逻辑:
//index.js
const app = getApp()
Page({
data: {
isQuery:false,
sciname:'',
sci:[],
},
onValueChange:function(value){
this.setData({
sciname:value.detail
})
},
onClickQuery:function(){
var _this = this
this.setData({
isQuery:true
})
console.log('begin'+_this.data.sciname)
wx.cloud.callFunction({
name: 'http_get',
data: {
sciname:_this.data.sciname
},
success:res=>{
// not found
if(res.result==-1){
wx.showModal({
Title: 'prompt',
Content: 'no relevant information is found. Try another keyword? ',
})
}else{
wx.setStorageSync('scis', res.result)
_this.setData({
sci:res.result
})
}
_this.setData({
isQuery: false
})
},
fail:err=>{
_this.setData({
isQuery: false
})
console.log(err)
},
})
},
onLoad: function() {
},
//Omit some codes
})
同样,我添加了一个详细信息页面以显示每个期刊的详细信息。
部署
1.上传项目文件
首先,对于每个云功能,右键单击并单击“上传和部署:云安装相关性”(当然,所有文件也可以上传和部署)。然后单击IDE右上角的“上传”,填写版本信息,即可完成上传。
登录微信公众平台管理界面,切换至版本管理,即可看到提交的版本。
2.填写小程序信息
在管理界面的首页中,编写了applet发布的过程。当小应用程序信息时,我们首先需要补充小应用程序的基本信息,例如名称,图标,描述等。微信官员通常会在7天内完成审核。我花了两天时间来查看我新注册的应用程序。
3.提交审查
审核完成后,可以将其提交审核。切换到版本管理界面,提交新上传的版本进行审批,并指明版本信息。审核也需要几天的时间。
南京小程序开发最后结语:
由于我们已有开发经验,因此注册和编码工作只需要一个下午,但是程序审核确实很耗时,需要耐心。
本文地址:
http://www.njanyou.cn/web/2862.html
Tag:
专业服务:
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话:025-65016872
上一篇:
对于WEB标准,南京网站制作我们做得足够吗?
下一篇:
南京网站建设是如何优化网站速度而提高网站性能