欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 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标准,南京网站制作我们做得足够吗?
下一篇: 南京网站建设是如何优化网站速度而提高网站性能
最新案例
永银
永银
珠海跨境电商
珠海跨境电商
五颗星商城
五颗星商城
上海万客生鲜超市
上海万客生鲜超市
一九在线商城
一九在线商城
你可能感兴趣
确保网站可访问性的 7 个重要步骤
电子学习中的微交互:通过小设计细节提高用户参与度
iGaming的设计趋势:平衡美学和功能
如何在 2024 年重新设计您的电子商务业务网站?
如何在 2024 年为您的网站创建徽标
无缝过渡:在设计驱动型开发中表现出色
社交媒体受欢迎程度背后的心理学
超越点击和点赞:释放数字营销的力量
最后更新
超越点击和点赞:释放数字营销的力量 社交媒体受欢迎程度背后的心理学 无缝过渡:在设计驱动型开发中表现出色 如何在 2024 年为您的网站创建徽标 如何在 2024 年重新设计您的电子商务业务网站? iGaming的设计趋势:平衡美学和功能 电子学习中的微交互:通过小设计细节提高用户参与度 确保网站可访问性的 7 个重要步骤
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例