快捷導(dǎo)航

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

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

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

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

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

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

1.1、知識點鞏固。

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"
   }
  ]
 }


}

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

wxml標(biāo)簽的掌握

huangbaokang.wxml文件

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

huangbaokang.js文件

Page({

 /**
  * 頁面的初始數(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;
}

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

事件函數(shù)處理

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

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

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