欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序從注冊賬號到上架(圖文詳解)

 更新時間:2019年07月17日 11:34:38   作者:csuhan  
這篇文章主要介紹了微信小程序從注冊賬號到上架詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

前言

自從微信小程序功能發(fā)布后,我就一直關(guān)注著小程序的動向,然而限于學(xué)業(yè)繁忙,總是沒有太多的時間去學(xué)習(xí)。大二逐漸學(xué)習(xí)了Vuejs,被其簡潔的設(shè)計所吸引,后來看了看小程序的開發(fā)文檔,發(fā)現(xiàn)這么的相似?可能前端的發(fā)展趨勢就是這樣的吧,各個框架都趨向于相似的優(yōu)秀的設(shè)計。

大三逐漸學(xué)習(xí)了Go語言,為了練習(xí)Go語言,同時也將自己幾年來積累的東西聚合在一起,于是開發(fā)了微信小程序:We中南(可以去微信搜索,雖然現(xiàn)在畢業(yè)已經(jīng)不打算維護(hù)了),其聚合了中南大學(xué)校內(nèi)常見的信息查詢功能,如:成績課表查詢、校車校歷查詢等項目已經(jīng)在我的Github開源:前端、后端

We中南、SCI期刊IF查詢

今年暑假的某天突然心血來潮,看了下We中南的數(shù)據(jù)統(tǒng)計,發(fā)現(xiàn)還是有人用的,在沒有推廣的情況下居然增加了好幾百的訪問量(突然的感動),同時發(fā)現(xiàn)小程序支持云函數(shù)開發(fā)了,也就是說對于小型的小程序不必使用后端服務(wù)器,直接使用其提供的nodejs環(huán)境進(jìn)行開發(fā)。

經(jīng)過這些天的摸索,我想把自己從小程序注冊到上架的全過程分享出來,供準(zhǔn)備學(xué)習(xí)小程序的同學(xué)參考。

準(zhǔn)備工作

1. 注冊微信小程序賬號

點擊傳送門立馬注冊微信小程序賬號。點進(jìn)去后會看到如下界面,選擇注冊類型時要選擇微信小程序。

注冊界面

接著填寫相關(guān)的信息即可完成注冊。

注冊界面-填寫信息

在完成注冊后,切換到開發(fā)->開發(fā)設(shè)置,可以查看開發(fā)者ID。

AppID

2. 下載開發(fā)者工具,新建項目

進(jìn)入傳送門,下載安裝最新版的開發(fā)者工具。使用開發(fā)者工具,開發(fā)者可以完成小程序的 API 和頁面的開發(fā)調(diào)試、代碼查看和編輯、小程序預(yù)覽和發(fā)布等功能。

關(guān)于IDE使用方法的界面,可以詳細(xì)參考官方文檔

接著打開開發(fā)者工具,修改項目名稱,填入上面說的AppID,后端服務(wù)選擇小程序云開發(fā)。

新建小程序項目

新建項目后我們可以看到,IDE已經(jīng)幫我們新建了一個包含云函數(shù)開發(fā)的小程序模板,還提供了一些功能測試界面。
此時我們并沒有開通云開發(fā),需要點擊IDE左上角的“云開發(fā)”,然后選擇開通云服務(wù)。

IDE主界面

開發(fā)小程序

1. 關(guān)于項目文件結(jié)構(gòu)的介紹

項目結(jié)構(gòu)

項目分為兩個子文件夾,一個為cloudfunctions,里面包含小程序的云函數(shù),一個子文件夾包含一個云函數(shù);另一個為miniprogram,是小程序的前端文件夾,沒有固定的文件夾格式,完全可以通過對app.json進(jìn)行修改定制自己的文件夾。具體文件的介紹可以參考官方文檔

2. 修改小程序信息

打開miniprogram文件夾下的app.json,其定義了小程序的基本信息。
下面是我的小程序的app.json,我將示例里無關(guān)的頁面都刪除了,添加了index主界面和detail詳情頁。
關(guān)于示例項目的修改:可以直接將pages目錄下除index外的頁面都刪除,將style、images文件夾下的文件都刪除。

{
 "pages": [
  "pages/index/index",
  "pages/detail/index"
 ],
 "window": {
  "backgroundColor": "#F6F6F6",
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#F6F6F6",
  "navigationBarTitleText": "SCI IF期刊影響因子查詢2019",
  "navigationBarTextStyle": "black"
 },
 "sitemapLocation": "sitemap.json"
}

3. 新建云函數(shù)!

云函數(shù)最大的優(yōu)勢便是無需購買服務(wù)器,無需注冊域名,并無需配置SSL證書,真正達(dá)到了開箱即用。
在cloudfunctions目錄上又見新建nodejs云函數(shù),即可創(chuàng)建一個新的云函數(shù),其包含了兩個文件:package.json、index.js

package.json為一個標(biāo)準(zhǔn)的npm包,index.js為云函數(shù)的主文件。下面是新建云函數(shù)的初始內(nèi)容,可以看到其首先引入了wx-server-sdk,它為小程序提供了操作云數(shù)據(jù)庫的能力,接著初始化云函數(shù),export云函數(shù)內(nèi)容。

// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
 const wxContext = cloud.getWXContext()

 return {
  event,
  openid: wxContext.OPENID,
  appid: wxContext.APPID,
  unionid: wxContext.UNIONID,
 }
}

需要說明的是:云函數(shù)包含幾乎完整的nodejs環(huán)境,因此一些常見的nodejs庫如:requests、chreeio等都可以通過package.json添加,使用。

4. 為云函數(shù)添加功能

本文的小程序為SCI期刊影響因子查詢的小程序,邏輯較為簡單,后端僅需要提供一個期刊查詢接口,為前端提供相應(yīng)期刊的影響因子即可。

1.新建云函數(shù)http_get

2.引入相關(guān)類庫。在終端中打開云函數(shù)http_get的目錄,接著安裝依賴庫。由于此函數(shù)利用了第三方的查詢接口,因此需要使用http請求庫got和http解析庫cheerio。具體操作如下

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

3.為函數(shù)添加功能。此處主要是加載相關(guān)類庫,解析html,然后將結(jié)果編碼為json返回客戶端。

// 加載相關(guān)類庫
const cloud = require('wx-server-sdk')
const got = require('got')
const querystring = require('querystring')
const cheerio = require('cheerio')
cloud.init()
// 云函數(shù)入口函數(shù)
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 });
 //請求數(shù)據(jù)
 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(),
    //省略部分內(nèi)容,解析html參數(shù)
    //影響因子解析
    if: $(item).children().eq(7).text(),
   }
  }).get()
  return jounalLists //返回解析結(jié)果
 }
}

4.調(diào)試云函數(shù)。云函數(shù)的調(diào)試可以通過云端調(diào)試:IDE界面->云開發(fā)->云函數(shù),選擇相應(yīng)的云函數(shù)即可進(jìn)行調(diào)試。點擊調(diào)試后即可返回調(diào)試結(jié)果,可以根據(jù)結(jié)果對函數(shù)進(jìn)行修改。

云函數(shù)調(diào)試

云函數(shù)調(diào)試

同時也可以通過本地環(huán)境調(diào)試云函數(shù):在cloudfunctions下相應(yīng)函數(shù)文件夾點擊“本地調(diào)試”即可進(jìn)行調(diào)試,相比于云端調(diào)試,本地調(diào)試更加便捷,也無需每次調(diào)試前上傳云函數(shù)到服務(wù)器。但需要注意的是:請在云函數(shù)目錄下執(zhí)行npm install完成相關(guān)類庫安裝,然后才能進(jìn)行調(diào)試。

云函數(shù)調(diào)試

5. 添加小程序頁面

小程序的每個頁面都包含四個文件:.js、.json、.wxml、wxss。js負(fù)責(zé)程序邏輯、json配置頁面參數(shù)、wxml定義頁面結(jié)構(gòu)、wxss定義頁面樣式。這就相當(dāng)于將HTML頁面拆分為.html、.css、.js。

由于小程序是運行在微信內(nèi)的webview環(huán)境,因此其語法與html有所不同,可以參考官方文檔:傳送門

為了方便頁面構(gòu)建,本文引入了一個第三方類庫:Vant,其提供了精美的界面元素,開箱即用,詳細(xì)使用方法可以參見vant官方文檔。

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

小程序界面

其對應(yīng)的代碼如下:

頁面結(jié)構(gòu)

<!--index.wxml-->
 <view class='head_img'>
 <van-cell-group custom-class="cell_group">
 <van-field
 custom-class="cell_filed"
 value="{{ sciname }}"
 placeholder="期刊名稱/首字母/縮寫/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}}">查詢</van-button>
 </view>
 <view wx:if="{{sci.length>0}}">
 <van-cell-group title="共找到{{sci.length}}本期刊">
 <view wx:for="{{sci}}"wx:for-index="idx" wx:for-item="item" wx:key="idx">
  <van-cell title="{{item.sciname}}" 
  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=>{
 //未查到
 if(res.result==-1){
  wx.showModal({
  title: '提示',
  content: '未查詢到相關(guān)信息,換個關(guān)鍵詞試試?',
  }) 
 }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() {
 },
//省略部分代碼
})

按照同樣的方式,我又添加了詳情頁,對于每一本期刊的詳細(xì)信息進(jìn)行展示。

部署

1. 上傳項目文件

首先對于每個云函數(shù),都要右鍵,點擊“上傳并部署:云端安裝依賴”(當(dāng)然上傳并部署所有文件也可以)。接著點擊IDE右上角的上傳,填寫版本信息,即可完成上傳。
登錄到微信公眾平臺的管理界面,切換到版本管理,我們便可以看到已經(jīng)提交的版本。

小程序?qū)徍?/p>

2. 填寫小程序信息

在管理界面首頁寫著小程序發(fā)布流程,我們需要先補(bǔ)充小程序的基本信息,如名稱、圖標(biāo)、描述等,當(dāng)小程序信息。微信官方一般會在7日之內(nèi)完成審核,我新注冊的小程序?qū)徍擞昧藘商鞎r間。

3. 提交審核

審核完成之后,即可提交審核。切換到版本管理界面,對剛剛上傳的版本提交審核,注明版本信息即可。審核也需要幾天的時間。

結(jié)語

由于已經(jīng)有過一次開發(fā)經(jīng)驗,本次的注冊和編碼工作只用了一個下午,但程序?qū)徍舜_實十分的耗時,需要耐心的等待。
本程序也發(fā)布在github上了:傳送門

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • input 禁止輸入特殊字符的四種實現(xiàn)方式

    input 禁止輸入特殊字符的四種實現(xiàn)方式

    某些特殊字符傳入后臺會產(chǎn)生錯誤,可能導(dǎo)致sql注入,所以要想法從根本上攔截,接下來通過本文給大家介紹input 禁止輸入特殊字符的方式,對input 禁止特殊字符知識感興趣的朋友一起看下吧
    2016-08-08
  • 淺析Bootstrap組件之面板組件

    淺析Bootstrap組件之面板組件

    這篇文章主要介紹了淺析Bootstrap組件之面板組件 的相關(guān)資料,需要的朋友可以參考下
    2016-05-05
  • js實現(xiàn)簡易購物車功能

    js實現(xiàn)簡易購物車功能

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡易購物車功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • 一文詳解JavaScript的轉(zhuǎn)碼方式

    一文詳解JavaScript的轉(zhuǎn)碼方式

    JavaScript 轉(zhuǎn)碼是指將 JavaScript 代碼從一種編碼方式轉(zhuǎn)換為另一種編碼方式,常見的轉(zhuǎn)碼方式包括 URL 編碼和 Base64 編碼,解碼是前端比較常見的一種操作,本文就給大家講講JavaScript轉(zhuǎn)碼方式
    2023-09-09
  • url 特殊字符 傳遞參數(shù)解決方法

    url 特殊字符 傳遞參數(shù)解決方法

    有些符號在URL中是不能直接傳遞的,如果要在URL中傳遞這些特殊符號,那么就要使用他們的編碼了。下表中列出了一些URL特殊符號及編碼。
    2010-01-01
  • JS異步宏隊列微隊列原理詳解

    JS異步宏隊列微隊列原理詳解

    這篇文章主要介紹了JS異步宏隊列微隊列原理詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-09-09
  • JS獲取url參數(shù),JS發(fā)送json格式的POST請求方法

    JS獲取url參數(shù),JS發(fā)送json格式的POST請求方法

    下面小編就為大家分享一篇JS獲取url參數(shù),JS發(fā)送json格式的POST請求方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • JS實現(xiàn)兩周內(nèi)自動登錄功能

    JS實現(xiàn)兩周內(nèi)自動登錄功能

    這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)兩周內(nèi)自動登錄功能的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • JavaScript動態(tài)檢測密碼強(qiáng)度原理及實現(xiàn)方法詳解

    JavaScript動態(tài)檢測密碼強(qiáng)度原理及實現(xiàn)方法詳解

    這篇文章主要介紹了JavaScript動態(tài)檢測密碼強(qiáng)度原理及實現(xiàn)方法,結(jié)合具體實例形式詳細(xì)分析了javascript針對輸入字符串密碼強(qiáng)度檢測的原理與相關(guān)判斷操作技巧,需要的朋友可以參考下
    2019-06-06
  • JavaScript通過select動態(tài)更換圖片的方法

    JavaScript通過select動態(tài)更換圖片的方法

    這篇文章主要介紹了JavaScript通過select動態(tài)更換圖片的方法,涉及javascript動態(tài)操作圖片src的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03

最新評論