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

發(fā)布時(shí)間：2020-10-24 09:04:38 來源：腳本之家閱讀：199 作者：黃寶康欄目：web開發(fā)

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

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

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

1.1、知識點(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"
   }
  ]
 }


}

入口全局配置主要配置頁簽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({

 /**
  * 頁面的初始數(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)一步掌握事件處理等，綁定一個(gè)方法，在js文件中相對應(yīng)一個(gè)方法。

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

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

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

輸入相關(guān)版本號確定之后可以在微信小程序后臺管理處看到提交的版本。

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

上圖我的是提交完之后的，提交完之后進(jìn)入審核中，一般一兩天就能查看審核結(jié)果，通過審核之后，還需要發(fā)布上線。

經(jīng)過上面的操作之后就可以在微信里，小程序處進(jìn)行搜索我們自己開發(fā)的程序了。

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

附：工程架構(gòu)圖

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

以上所述是小編給大家介紹的微信小程序上線發(fā)布流程詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽