微信小程序上線發(fā)布流程圖文詳解

更新時(shí)間：2019年05月06日 09:22:13 作者：黃寶康

這篇文章主要介紹了微信小程序上線發(fā)布流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近花了一天左右的時(shí)間學(xué)習(xí)了下微信小程序的開(kāi)發(fā)，試著練習(xí)一把的心態(tài)，搞了一個(gè)很簡(jiǎn)單的頁(yè)面。

就當(dāng)是學(xué)習(xí)總結(jié)吧：學(xué)習(xí)要點(diǎn)還是挺多的，通過(guò)查看官方接口文檔，熟悉微信小程序開(kāi)發(fā)工具，工程架構(gòu)，相比傳統(tǒng)頁(yè)面開(kāi)發(fā)類似，微信小程序也是由js文件，頁(yè)面布局文件wxml和樣式文件wxss

一、先登錄微信公眾平臺(tái)，在小程序欄目里注冊(cè)獲取appid，在開(kāi)發(fā)工具里填寫(xiě)該appid，打開(kāi)開(kāi)發(fā)工具進(jìn)行編碼工作。

1.1、知識(shí)點(diǎn)鞏固。

app.json文件

{
 "pages":[
  "pages/huangbaokang/huangbaokang",
  "pages/zhanglulu/zhanglulu"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#baf088",
  "navigationBarTitleText": "幸?；橐?,
  "navigationBarTextStyle":"black" 
 },
 "tabBar": {
  "list": [
   {
    "pagePath": "pages/huangbaokang/huangbaokang",
    "text": "黃寶康",
    "iconPath": "images/1.png",
    "selectedIconPath": "images/1.png"
   },
   {
    "pagePath": "pages/zhanglulu/zhanglulu",
    "text": "張露露",
    "iconPath": "images/2.png",
    "selectedIconPath": "images/2.png"
   }
  ]
 }


}

入口全局配置主要配置頁(yè)簽tabBar設(shè)置，全局pages定義，頭部背景，及字體，網(wǎng)絡(luò)超時(shí)等。

wxml標(biāo)簽的掌握

huangbaokang.wxml文件

<!--pages/huangbaokang/huangbaokang.wxml-->
<view class='title'>黃寶康的帥氣照</view>
<view class='photo-list' wx:for="{{photos_hbk}}" >
 <!--遍歷圖片文件，生成各個(gè)view-->
 <view class='photo-item'>
  <image src='/images/hbk{{index+1}}.png'></image>
 </view>
</view>

huangbaokang.js文件

Page({

 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 data: {
  photos_hbk: ['1.png', '2.png', '3.png', '4.png']
 }
})

huangbaokang.wxss文件

/* pages/huangbaokang/huangbaokang.wxss */
.title{
 font-size: 70rpx;
 text-align: center;
}

.photo-list{
 margin-top: 20rpx;
}

.photo-item{
 width: 100%;
 height: 100%;
 margin-top: 20rpx;
}

具體到頁(yè)面的開(kāi)發(fā)，需要學(xué)習(xí)wxml各種標(biāo)簽的用法，語(yǔ)句wx:for的使用，及動(dòng)態(tài)數(shù)據(jù)綁定（使用{{}}）。

事件函數(shù)處理

進(jìn)一步掌握事件處理等，綁定一個(gè)方法，在js文件中相對(duì)應(yīng)一個(gè)方法。

二、上傳發(fā)布審核上線

編碼完之后，可以在開(kāi)發(fā)工具右上角點(diǎn)擊上傳按鈕將代碼至微信后臺(tái)。如下：