學(xué)習微信小程序開發(fā)指南

官方教程

本文檔將帶你創(chuàng)建完成一個微信小程序,并可以在手機上體驗該小程序的實際效果再沧。這個小程序的首頁將會顯示歡迎語以及當前用戶的微信頭像炒瘸,點擊頭像,可以在新開的頁面中查看當前小程序的啟動日志拐邪。

1.獲取微信小程序的 AppID
2.創(chuàng)建項目

項目創(chuàng)建成功后,我們就可以點擊該項目扎阶,進入并看到完整的開發(fā)者工具界面,點擊左側(cè)導(dǎo)航,在「編輯」里可以查看和編輯我們的代碼啡邑,在「調(diào)試」里可以測試代碼并模擬小程序在微信客戶端效果井赌,在「項目」里可以發(fā)送到手機里預(yù)覽實際效果。

3.編寫代碼

最關(guān)鍵的流部,是 app.js纹坐、app.json耘子、app.wxss 這三個。其中:

  • .js 后綴的是腳本文件
  • .json 后綴的文件是配置文件
  • .wxss 后綴的是樣式表文件绒障。

微信小程序會讀取這些文件捍歪,并生成小程序?qū)嵗?/p>

app.js

app.js 是小程序的腳本代碼糙臼。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量焚鹊。調(diào)用 MINA 提供的豐富的 API韧献,如本例的同步存儲及同步讀取本地數(shù)據(jù)。

//app.js

App({

  onLaunch: function () {
      //調(diào)用API從本地緩存中獲取數(shù)據(jù)
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },

  getUserInfo:function(cb){
      var that = this;
    if(this.globalData.userInfo){
        typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
          //調(diào)用登錄接口
          wx.login({
            success: function () {
                  wx.getUserInfo({
                    success: function (res) {
                          that.globalData.userInfo = res.userInfo;
                          typeof cb == "function" && cb(that.globalData.userInfo)
                    }
                })
            } 
          });
    } 
  },

  globalData:{
      userInfo:null
  }   
})
app.json

app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成探橱,配置小程序的窗口背景色,配置導(dǎo)航條樣式哗讥,配置默認標題胞枕。注意該文件不可添加任何注釋腐泻。

{

  "pages":[
      "pages/index/index",   
    "pages/logs/logs"
  ],

  "window":{
      "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  } 
}
app.wxss

app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的class屬性上直接使用app.wxss中聲明的樣式規(guī)則构诚。

.container {

    height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center; 
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
}
4.創(chuàng)建頁面

在這個案例里铆惑,我們有兩個頁面员魏,index 頁面和 logs 頁面,即歡迎頁和小程序啟動日志的展示頁盏阶,他們都在 pages 目錄下闻书。微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中魄眉,且 pages 中的第一個頁面是小程序的首頁。

每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成岩梳,如:index.js晃择、index.wxml、index.wxss列疗、index.json抵栈。.js 后綴的文件是腳本文件,.json 后綴的文件是配置文件斥赋,.wxss 后綴的是樣式表文件产艾,.wxml 后綴的文件是頁面結(jié)構(gòu)文件胰舆。

index.wxml是頁面的結(jié)構(gòu)文件:
<view class="container">
    <view bindtap="bindViewTap" class="userinfo"> 
        <image class="userinfo-avatar" 
               src="{{userInfo.avatarUrl}}" 
               background-size="cover"></image> 
        <text class="userinfo-nickname">{{userInfo.nickName}}</text> 
    </view> 
    <view class="usermotto"> 
        <text class="user-motto">{{motto}}</text> 
    </view>
</view>

本例中使用了view蹬挤、image焰扳、text來搭建頁面結(jié)構(gòu)倦零,綁定數(shù)據(jù)和交互處理函數(shù)。

index.js 是頁面的腳本文件

在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)吨悍、獲取小程序?qū)嵗暶鞑⑻幚頂?shù)據(jù),響應(yīng)頁面交互事件等育瓜。

//index.js

//獲取應(yīng)用實例
var app = getApp()

Page({

  data: {
      motto: 'Hello World',
      userInfo: {}
  },

  //事件處理函數(shù)
  bindViewTap: function() {
    wx.navigateTo({
        url: '../logs/logs'
    })
   },

  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調(diào)用應(yīng)用實例的方法獲取全局數(shù)據(jù)
    app.getUserInfo(function(userInfo){
        //更新數(shù)據(jù)
       that.setData({
            userInfo:userInfo
          })
    })
 }
})
index.wxss是頁面的樣式表
.userinfo {
    display: flex;
    flex-direction: column;
      align-items: center;
}

.userinfo-avatar {
    width: 128rpx;
    height: 128rpx;
    margin: 20rpx;
    border-radius: 50%;
}

.userinfo-nickname {
    color: #aaa;
}

.usermotto {
    margin-top: 200px;
}

頁面的樣式表是非必要的葫隙。當有頁面樣式表時,頁面的樣式表中的樣式規(guī)則會層疊覆蓋 app.wxss 中的樣式規(guī)則躏仇。如果不指定頁面的樣式表恋脚,也可以在頁面的結(jié)構(gòu)文件中直接使用 app.wxss 中指定的樣式規(guī)則。

index.json是頁面的配置文件

頁面的配置文件是非必要的焰手。當有頁面的配置文件時,配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項书妻。如果沒有指定的頁面配置文件船响,則在該頁面直接使用 app.json 中的默認配置。

logs的頁面結(jié)構(gòu)
<!--logs.wxml--> 
<view class="container log-list"> 
    <block wx:for-items="{{logs}}" 
           wx:for-item="log"> 
        <text class="log-item">{{index + 1}}. {{log}}</text> 
    </block> 
</view>

logs 頁面使用 <block/> 控制標簽來組織代碼躲履,在 <block/> 上使用 wx:for-items 綁定 logs 數(shù)據(jù)见间,并將 logs 數(shù)據(jù)循環(huán)展開節(jié)點

logs頁面腳本
//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
      logs: []
  },

  onLoad: function () {
      this.setData({
          logs: (wx.getStorageSync('logs') || []).map(function (log) {
            return util.formatTime(new Date(log))
        })
      })
  }
})
運行結(jié)果
4.手機預(yù)覽

開發(fā)者工具左側(cè)菜單欄選擇「項目」,點擊「預(yù)覽」工猜,掃碼后即可在微信客戶端中體驗缤剧。

不過,目前域慷,預(yù)覽和上傳功能尚無法實現(xiàn)荒辕,需要等待微信官方的下一步更新汗销。

微信應(yīng)用開放的服務(wù)和組件包含如下:

  • 視圖容器:視圖(View)、滾動視圖抵窒、Swiper
  • 基礎(chǔ)內(nèi)容:圖標弛针、文本、進度條
  • 表單組件:按鈕李皇、表單等等
  • 操作反饋
  • 導(dǎo)航
  • 媒體組建:音頻削茁、圖片、視頻掉房。
  • 地圖
  • 畫布
  • 文件操作能力
  • 網(wǎng)絡(luò):上傳下載能力茧跋、WebSocket
  • 數(shù)據(jù):數(shù)據(jù)緩存能力
  • 位置:獲取位置、查看位置
  • 設(shè)備:網(wǎng)絡(luò)狀態(tài)卓囚、系統(tǒng)信息瘾杭、重力感應(yīng)、羅盤
  • 界面:設(shè)置導(dǎo)航條哪亿、導(dǎo)航粥烁、動畫、繪圖等等
  • 開放接口:登錄蝇棉,包括簽名加密讨阻,用戶信息、微信支付篡殷、模板消息
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末钝吮,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子板辽,更是在濱河造成了極大的恐慌搀绣,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件戳气,死亡現(xiàn)場離奇詭異链患,居然都是意外死亡,警方通過查閱死者的電腦和手機瓶您,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門麻捻,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人呀袱,你說我怎么就攤上這事贸毕。” “怎么了夜赵?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵明棍,是天一觀的道長。 經(jīng)常有香客問我寇僧,道長摊腋,這世上最難降的妖魔是什么沸版? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮兴蒸,結(jié)果婚禮上视粮,老公的妹妹穿的比我還像新娘。我一直安慰自己橙凳,他們只是感情好蕾殴,可當我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著岛啸,像睡著了一般钓觉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上坚踩,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天荡灾,我揣著相機與錄音,去河邊找鬼堕虹。 笑死,一個胖子當著我的面吹牛芬首,可吹牛的內(nèi)容都是我干的赴捞。 我是一名探鬼主播,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼郁稍,長吁一口氣:“原來是場噩夢啊……” “哼赦政!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起耀怜,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤恢着,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后财破,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體掰派,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年左痢,在試婚紗的時候發(fā)現(xiàn)自己被綠了靡羡。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡俊性,死狀恐怖略步,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情定页,我是刑警寧澤趟薄,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站典徊,受9級特大地震影響杭煎,放射性物質(zhì)發(fā)生泄漏恩够。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一岔帽、第九天 我趴在偏房一處隱蔽的房頂上張望玫鸟。 院中可真熱鬧,春花似錦犀勒、人聲如沸屎飘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽钦购。三九已至,卻和暖如春褂萧,著一層夾襖步出監(jiān)牢的瞬間押桃,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工导犹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留唱凯,地道東北人。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓谎痢,卻偏偏與公主長得像磕昼,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子节猿,可洞房花燭夜當晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容