關(guān)于photoshop生成的文件默認的擴展名稱(chēng)是的信息

021yin.com

就可以在網(wǎng)站的“設置”--“開(kāi)發(fā)者設置”中，查看到*小程序的 AppID 了，注意不可直接使用服務(wù)號或訂閱號的 AppID 。注意：如果要以非管理員*號在手機上體驗該小程序，那么我們還需要操作“綁定開(kāi)發(fā)者”。即在“用戶(hù)身份”-“開(kāi)發(fā)者”模塊，綁定上需要體驗該小程序的*號。本教程默認注冊帳號、體驗都是使用管理員*號。

第二步：創(chuàng )建項目；我們需要通過(guò)開(kāi)發(fā)者工具，來(lái)完成小程序創(chuàng )建和代碼編輯。

PS：為方便初學(xué)者了解*小程序的基本代碼結構，在創(chuàng )建過(guò)程中，如果選擇的本地文件夾是個(gè)空文件夾，開(kāi)發(fā)者工具會(huì )提示，是否需要創(chuàng )建一個(gè) quick start 項目。選擇“是”，開(kāi)發(fā)者工具會(huì )幫助我們在開(kāi)發(fā)目錄里生成一個(gè)簡(jiǎn)單的 demo。

開(kāi)發(fā)者工具安裝完成后，打開(kāi)并使用*掃碼登錄。選擇創(chuàng )建“項目”，填入上文獲取到的 AppID ，設置一個(gè)本地項目的名稱(chēng)（非小程序名稱(chēng)），比如“我的第一個(gè)項目”，并選擇一個(gè)本地的文件夾作為代碼存儲的目錄，點(diǎn)擊“新建項目”就可以了。

項目創(chuàng )建成功后，我們就可以點(diǎn)擊該項目，進(jìn)入并看到完整的開(kāi)發(fā)者工具界面，點(diǎn)擊左側導航，在“編輯”里可以查看和編輯我們的代碼，在“調試”里可以測試代碼并模擬小程序在*客戶(hù)端效果，在“項目”里可以發(fā)送到手機里預覽實(shí)際效果。

第三步：編寫(xiě)代碼；創(chuàng )建小程序實(shí)例：

首先，我們先簡(jiǎn)單了解這三個(gè)文件的功能，方便修改以及從頭開(kāi)發(fā)自己的*小程序。

app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監聽(tīng)并處理小程序的生命周期函數、聲明全局變量。調用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。想了解更多可用 API，可參考 API 文檔

//app.jsApp({ onLaunch: function () { //調用API從本地緩存中獲取數據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{ //調用登錄接口 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 是對整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋。更多可配置項可參考配置詳解

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

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

/**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 )建頁(yè)面

進(jìn)入正題：：

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

在這個(gè)教程里，我們有兩個(gè)頁(yè)面，index 頁(yè)面和 logs 頁(yè)面，即歡迎頁(yè)和小程序啟動(dòng)日志的展示頁(yè)，他們都在 pages 目錄下。*小程序中的每一個(gè)頁(yè)面的【路徑+頁(yè)面名】都需要寫(xiě)在 app.json 的 pages 中，且 pages 中的第一個(gè)頁(yè)面是小程序的首頁(yè)。

每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁(yè)面結構文件。

index.wxml 是頁(yè)面的結構文件：

!--index.wxml--viewclass="container"viewbindtap="bindViewTap"class="userinfo"imageclass="userinfo-avatar"src="{{userInfo.avatarUrl}}"background-size="cover"/imagetextclass="userinfo-nickname"{{userInfo.nickName}}/text/viewviewclass="usermotto"textclass="user-motto"{{motto}}/text/view/view

本例中使用了 、、 來(lái)搭建頁(yè)面結構，綁定數據和交互處理函數。

index.js 是頁(yè)面的腳本文件，在這個(gè)文件中我們可以監聽(tīng)并處理頁(yè)面的生命周期函數、獲取小程序實(shí)例，聲明并處理數據，響應頁(yè)面交互事件等。

//index.js//獲取應用實(shí)例var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {} }, //事件處理函數 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, : function () { console.log('') var that = this//調用應用實(shí)例的方法獲取全局數據 app.getUserInfo(function(userInfo){ //更新數據 that.setData({ userInfo:userInfo }) }) } })

index.json 是頁(yè)面的配置文件：

頁(yè)面的配置文件是非必要的。當有頁(yè)面的配置文件時(shí)，配置項在該頁(yè)面會(huì )覆蓋 app.json 的 window 中相同的配置項。如果沒(méi)有指定的頁(yè)面配置文件，則在該頁(yè)面直接使用 app.json 中的默認配置。

index.wxss 是頁(yè)面的樣式表：

/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center; }.userinfo-avatar { width: 12* rpx; height: 12* rpx; margin: 20rpx; border-radius: * 0%; }.userinfo-nickname { color: #aaa; }.usermotto { margin-top: 200px; }

頁(yè)面的樣式表是非必要的。當有頁(yè)面樣式表時(shí)，頁(yè)面的樣式表中的樣式規則會(huì )層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁(yè)面的樣式表，也可以在頁(yè)面的結構文件中直接使用 app.wxss 中指定的樣式規則。

logs 的頁(yè)面結構

!--logs.wxml--viewclass="container log-list"blockwx:for="{{logs}}"wx:for-item="log"textclass="log-item"{{index + 1}}. {{log}}/text/block/view

logs 頁(yè)面使用 控制標簽來(lái)組織代碼，在 block/ 上使用 wx:for 綁定 logs 數據，并將 logs 數據循環(huán)展開(kāi)節點(diǎn)

//logs.jsvar util = require('../../utils/util.js') Page({ data: { logs: [] }, : function () { this.setData({ logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(newDate(log)) }) }) } })

運行結果如下：

最后一步就是：手機預覽；開(kāi)發(fā)者工具左側菜單欄選擇"項目"，點(diǎn)擊"預覽"，掃碼后即可在*客戶(hù)端中體驗。好了，廣州小程序開(kāi)發(fā)攻略（簡(jiǎn)易版）分享先到這里，歡迎補充請聯(lián)系吉印通13816211622 1* * * 971* * * ，tel1* * 20* * 797* ，如若喜歡本文，敬請分享，小編叩謝各位看官??！

互動(dòng)環(huán)節：說(shuō)一說(shuō)有哪些手機小程序？你覺(jué)得好用