小程式需要注意哪些點-小程式開發-PHP中文網

首頁

微信小程式

小程式開發

小程式需要注意哪些點

小云云

Mar 17, 2018 pm 02:37 PM

哪些小程式注意

本文主要和大家分享小程式需要注意哪些點，希望能幫助大家更好的開發微信功能。

一.細節

#1.小程式包含一個描述整體程式的app 和多個描述各自頁面的page

2.小程式框架分為視圖層與邏輯層

邏輯層是由JavaScript寫。

」視圖層由 WXML 與 WXSS 編寫，由元件來進行展示。元件(Component)是視圖的基本組成單元。

#將邏輯層的資料反應成視圖，同時將視圖層的事件傳送給邏輯層。

二.小知識點

#1.App()

函數用來註冊一個小程式。

接受一個 object 參數，其指定小程式的生命週期函數等。
都是在app.js檔案中

2.Page() 函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始資料、生命週期函數、事件處理函數等。

(1).初始化資料:data

#data 將會以JSON 的形式由邏輯層傳至渲染層，所以其資料必須是可以轉換成JSON 的格式：字串，數字，布林值，對象，數組。

# 小程式需要注意哪些點

# (2).

生命週期函數

(3).事件處理函數：bindtap
click me

##########################3.######實作動態顯示並隱藏某個控制項### ##########

列表1

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

這時：firstPerson=吃

#。

##5#.彈性盒字：display:flex;

############################

<view class="phone_one" bindtap="clickPerson">  
    <view class="phone_personal">{{firstPerson}}</view>  
    <image src="../../image/i.png" class="personal_image {{selectArea ? &#39;rotateRight&#39; :&#39;&#39;}}"></image>  
</view>

#########在父級：#######display: flex;##################### justify-content:space-between;################### #####這樣子集就會並列。 justify-content:space-between;這樣子集就會分別在兩個頭############################### ###################6.取得自身的樣式e.detail.width,e.detail.height############

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架构的。