欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
微信小程序的快速发展:从帐户注册到现成的小程序
来源:南京网站制作 时间:2019-12-02 09:11:38

自从微信小程序的功能发布以来,南京小程序开发一直在关注小程序的趋势。但是,由于工作繁忙,我没有太多时间去学习。现在逐渐研究了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标准,南京网站制作我们做得足够吗?
下一篇: 南京网站建设是如何优化网站速度而提高网站性能
最新案例
迈特菲
迈特菲
开为科技
开为科技
南京清真桃源村食品厂有限公司
南京清真桃源村食品厂有限公司
泰杰赛
泰杰赛
苏派教育
苏派教育
你可能感兴趣
如何使网站符合美国ADA
5个标志着您的网站需要升级
南京网站制作分享只能有一个:单页网站的力量
南京网站建设说说为什么响应式和移动优先设计对医疗行业至关重要
南京网站制作分享10个免费网站设计工具
南京网站建设教你使用主页SEO技巧可帮助您增加自然网站流量
网站制作的动画–激发网站生命的6种有效方法
为什么南京网站建设我们使用WordPress
最后更新
5G对网站建设和开发的影响 响应式网页设计,这是答案吗?或只是响应? 商业网站南京网站制作认为最常见的7个问题 南京网站建设是如何优化网站速度而提高网站性能 微信小程序的快速发展:从帐户注册到现成的小程序 对于WEB标准,南京网站制作我们做得足够吗? 在南京网站建设的认为中什么是响应式网页设计? 使用车牌号输入法的微信小程序
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例