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

微信小程序開發(fā)入門基礎(chǔ)教程

 更新時(shí)間:2017年04月19日 11:51:10   作者:code_xzh  
這篇文章主要介紹了微信小程序開發(fā)入門基礎(chǔ)教程的相關(guān)資料,需要的朋友可以參考下

微信小程序開發(fā)入門基礎(chǔ)教程

本文檔將帶你一步步創(chuàng)建完成一個(gè)微信小程序,并可以在手機(jī)上體驗(yàn)該小程序的實(shí)際效果。

開發(fā)準(zhǔn)備工作獲取微信小程序的 AppID

登錄 https://mp.weixin.qq.com ,就可以在網(wǎng)站的“設(shè)置”-“開發(fā)者設(shè)置”中,查看到微信小程序的 AppID 了,注意不可直接使用服務(wù)號(hào)或訂閱號(hào)的 AppID 。
這里寫圖片描述

下載開發(fā)工具

下載地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476197489869

新建項(xiàng)目

開發(fā)者工具安裝完成后,打開并使用微信掃碼登錄。選擇創(chuàng)建“項(xiàng)目”,填入上文獲取到的 AppID ,設(shè)置一個(gè)本地項(xiàng)目的名稱(非小程序名稱),比如“我的第一個(gè)項(xiàng)目”,并選擇一個(gè)本地的文件夾作為代碼存儲(chǔ)的目錄,點(diǎn)擊“新建項(xiàng)目”就可以了。
為方便初學(xué)者了解微信小程序的基本代碼結(jié)構(gòu),在創(chuàng)建過程中,如果選擇的本地文件夾是個(gè)空文件夾,開發(fā)者工具會(huì)提示,是否需要?jiǎng)?chuàng)建一個(gè) quick start 項(xiàng)目。選擇“是”,開發(fā)者工具會(huì)幫助我們?cè)陂_發(fā)目錄里生成一個(gè)簡單的 demo。
這里寫圖片描述
這里寫圖片描述
這樣就搭建好了,我們來看一下主界面
這里寫圖片描述
整個(gè)開發(fā)工具基本分為三塊。

第一列:table-item 每個(gè)按鈕代表一個(gè)頁
第二列:webview 你的頁面在這里實(shí)時(shí)展示
第三列:chrome調(diào)試工具,暫且這樣叫吧,因?yàn)榇_實(shí)是使用了charome的調(diào)試工具, 在這里可以調(diào)試頁面的樣式,js,網(wǎng)絡(luò)檢測(cè),輸入輸出等等。

編寫示例小代碼創(chuàng)建小程序?qū)嵗?/strong>

點(diǎn)擊開發(fā)者工具左側(cè)導(dǎo)航的“編輯”,我們可以看到這個(gè)項(xiàng)目,已經(jīng)初始化并包含了一些簡單的代碼文件。最關(guān)鍵也是必不可少的,是 app.js、app.json、app.wxss 這三個(gè)。其中,.js后綴的是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件。微信小程序會(huì)讀取這些文件,并生成小程序?qū)嵗?

下面我們簡單了解這三個(gè)文件的功能,方便修改以及從頭開發(fā)自己的微信小程序。

app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API,如本例的同步存儲(chǔ)及同步讀取本地?cái)?shù)據(jù)。想了解更多可用 API,可參考 API 文檔。

//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 是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁面組成,配置小程序的窗口背景色,配置導(dǎo)航條樣式,配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。更多可配置項(xiàng)可參考配置詳解。

{
 "pages":[
 "pages/index/index",
 "pages/logs/logs"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
 }
}

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

/**app.wxss**/
.container {
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 200rpx 0;
 box-sizing: border-box;
}

創(chuàng)建頁面

在這個(gè)教程里,我們有兩個(gè)頁面,index 頁面和 logs 頁面,即歡迎頁和小程序啟動(dòng)日志的展示頁,他們都在 pages 目錄下。微信小程序中的每一個(gè)頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中,且 pages 中的第一個(gè)頁面是小程序的首頁。
每一個(gè)小程序頁面是由同路徑下同名的四個(gè)不同后綴文件的組成,如:index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件,.wxml后綴的文件是頁面結(jié)構(gòu)文件。
index.wxml 是頁面的結(jié)構(gòu)文件:

<!--index.wxml-->
<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>

index.js 是頁面的腳本文件,在這個(gè)文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗?,聲明并處理?shù)據(jù),響應(yīng)頁面交互事件等。

//index.js
//獲取應(yīng)用實(shí)例
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ǐn)?shù)據(jù)
 app.getUserInfo(function(userInfo){
  //更新數(shù)據(jù)
  that.setData({
  userInfo:userInfo
  })
 })
 }
})

index.wxss 是頁面的樣式表:

/**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;
}

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

index.json 是頁面的配置文件:

頁面的配置文件是非必要的。當(dāng)有頁面的配置文件時(shí),配置項(xiàng)在該頁面會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。如果沒有指定的頁面配置文件,則在該頁面直接使用 app.json 中的默認(rèn)配置。

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

<!--logs.wxml-->
<view class="container log-list">
 <block wx:for="{{logs}}" wx:for-item="log">
 <text class="log-item">{{index + 1}}. {{log}}</text>
 </block>
</view>

logs 頁面使用 控制標(biāo)簽來組織代碼,在 上使用 wx:for 綁定 logs 數(shù)據(jù),并將 logs 數(shù)據(jù)循環(huán)展開節(jié)點(diǎn)。

//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))
  })
 })
 }
})

這樣我們就完成了一個(gè)簡單入門級(jí)微信小程序開發(fā)。

感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!

相關(guān)文章

最新評(píng)論