本文主要和大家分享小程式需要注意哪些點,希望能幫助大家更好的開發微信功能。
一.細節
#1.小程式包含一個描述整體程式的app 和多個描述各自頁面的page
2.小程式框架分為視圖層與邏輯層
邏輯層是由JavaScript寫。
」視圖層由 WXML 與 WXSS 編寫,由元件來進行展示。 元件(Component)是視圖的基本組成單元。
#將邏輯層的資料反應成視圖,同時將視圖層的事件傳送給邏輯層。
二.小知識點
#1.App()
函數用來註冊一個小程式。接受一個
object 參數,其指定小程式的生命週期函數等。
都是在app.js檔案中
2.Page() 函數用來註冊一個頁面。接受一個 object 參數,其指定頁面的初始資料、生命週期函數、事件處理函數等。
(1).初始化資料:data
#data 將會以JSON 的形式由邏輯層傳至渲染層,所以其資料必須是可以轉換成JSON
的格式:字串,數字,布林值,對象,數組。
#
# (2).
生命週期函數
(3).事件處理函數:bindtap
##########################3.######實作動態顯示並隱藏某個控制項### ##########
#
data:{ open:false }, showitem:function(){ this.setData({ open:!this.data.open }) }
.display_show{ display: block; } .display_none{ display: none; }
#4.透過 #data-*
和 e.target.dateset
傳遞參數
##
this.setData({
firstPerson:e.target.dataset.me,
})
#。
##5#.彈性盒字:display:flex;
############################<view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/i.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> </view>
var app = getApp() Page({ data: { imgwidth:0, imgheight:0, }, imageLoad: function(e) { var _this=this; var $width=e.detail.width, //获取图片真实宽度 $height=e.detail.height, ratio=$width/$height; //图片的真实宽高比例 var viewWidth=this.data.screenWidth, //设置图片显示宽度, viewHeight=parseInt(viewWidth/ratio); //计算的高度值 _this.setData({ imgwidth:viewWidth, imgheight:viewHeight }) }
7.如何定义全局数据
在app.js的App({})中定义的数据或函数都是全局的,在页面中可以通过var app = getApp(); app.function/key的方式调用(不过我们没有必要再app.js中定义全局函数)
(1)设置全局变量
App({
globalData:{
userInfo:null,
test:"test"
}
})
获取变量值
var test = getApp().globalData.test;
console.log(test)
三.注意点小程序误区
1.小程序不是Html5。小程序是微信全新定义的规范,是基于xml+js的,不支持也不兼容HTML,兼容受限的部分css写法。
小程序和腾讯X5引擎也没关系。X5是QQ浏览器团队的,是基于HTML的,但小程序是微信团队自研的
2.小程序不是b/s。微信宣传的一个重点,是触手可得,不用安装。但小程序并不是b/s的在线页面,它是c/s架构的。
3.小程序体验好并且小程序并非只适合低频或长尾应用
4.小程式不是應用程式商店,是OS(作業系統)
#相關推薦:
######以上是小程式需要注意哪些點的詳細內容。更多資訊請關注PHP中文網其他相關文章!