微信小程序新手教程之細節說明
微信小程序新手教程之細節說明，本篇默認已經成功安裝微信小程序工具，來和小編一起看看吧
目錄結構
我們在微信提供的開發工具中新建一個項目，開發工具會給我們建立一個最基本的目錄結構和示例Demo代碼，結構如下：
結構很簡單，程序主體部分由app.js,app.json,app.wxss三個文件組成，而且必須放在項目的根目錄。
頁面由四個文件組成，分別是：
文件類型作用必填js頁面邏輯yeswxml頁面結構yeswxss頁面樣式nojson頁面配置no配置
使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。
每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
邏輯層
1.注冊程序
App() 函數用來注冊一個小程序。接受一個 object 參數，其指定小程序的生命周期函數等。
示例：
App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
globalData: 'I am global data'
})
2.注冊頁面
Page() 函數用來注冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
}
});
3.模塊化
可以將一些公共的代碼抽離成為一個單獨的 js 文件，作為一個模塊。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。需要注意的是：
exports 是 module.exports 的一個引用，因此在模塊里邊隨意更改 exports 的指向會造成未知的錯誤。所以我們更推薦開發者采用 module.exports 來暴露模塊接口，除非你已經清晰知道這兩者的關系。
小程序目前不支持直接引入 node_modules , 開發者需要使用到 node_modules 時候建議拷貝出相關的代碼到小程序的目錄中。
4.API
小程序開發框架提供豐富的微信原生 API，可以方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。
5.ES6 轉 ES5
微信小程序運行在三端：iOS、Android 和用于調試的開發者工具
在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中
在 Android 上，小程序的 javascript 代碼是運行在 X5 內核中
在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs(chrome) 中
雖然三個運行環境在大部分情況下是相似的，但是還有一些細微的區別，為了幫助開發者解決這種區別帶來的困擾，開發工具會自動幫助開發者將 ES6 的代碼轉為 ES5 的代碼。
對于使用其他構建工具的開發者，可以在項目也開中關掉這個功能，使用自己的構建和轉碼工具。
視圖層
和我之前對微信小程序的直覺不同，微信小程序不支持也不兼容HTML，而是微信全新定義的規范，它的視圖文件的后綴名為.wxml，是基于xml進行的擴展，其樣式表文件也并非CSS，而是.wxss,兼容受限的部分CSS寫法。
視圖渲染時，采用了類似單向數據綁定的方式進行數據綁定，WXML 中的動態數據均來自對應Page的data。使用Mustache語法(雙大括號)將變量包起來:
{{ message }}
框架可以讓數據與視圖非常簡單地保持同步。當做數據修改的時候，只需要在邏輯層修改數據，視圖層就會做相應的更新。支持條件渲染、列表渲染、模板、事件
WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。
WXSS 用來決定 WXML 的組件應該怎么顯示。
WXSS 具有 CSS 大部分特性。 同時為了更適合開發微信小程序，我們對 CSS 進行了擴充以及修改。
與 CSS 相比我們擴展的特性有：
尺寸單位
樣式導入
嗨圖功能
1、專題——DIY圖片的模板，點擊可以生成使用，分享到朋友圈。
2、分享墻——用戶上傳的自己DIY作品。
3、立即制作——可以用自己的圖來DIY。
4、告訴我——告訴產品的改進，內容的增加。
想要體驗怎么制作屬于自己個性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦!還等什么，趕緊掃碼體驗，開啟你的嗨圖之旅吧!
相關文章：
1. 使用12306微信小程序買車票到底靠不靠譜？使用12306微信小程序買車票可信嗎？2. 微信小程序微信小店怎么開通 微信小程序微信小店開通流程3. 蘋果iPhone XS MAX訂單生成圖是用什么軟件？微信小程序名字曝光4. 微信小程序游戲類目開放測試了嗎？開發者的小游戲發布時間介紹5. 微信小程序有未來嗎？微信小程序是否有未來？6. 有沒有p圖軟件的小程序？p圖軟件微信小程序使用教程7. 微信小程序支持長按識別二維碼嗎 微信小程序長按識別二維碼功能介紹8. 微信小程序怎么登陸QQ？在微信上登陸QQ具體操作流程9. 微信小程序美老師證件照 輕松制作高顏值證件照10. 微信小程序星標功能在哪？小程序星標怎么找不到
網公網安備