小程序中需要注意的點有哪些

這篇文章主要介紹了小程序中需要注意的點有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

一.細節

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

2.小程序框架分為視圖層和邏輯層

邏輯層是由JavaScript編寫。

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

將邏輯層的數據反應成視圖，同時將視圖層的事件發送給邏輯層。

二.小知識點

1.App() 函數用來注冊一個小程序。接受一個 object 參數，其指定小程序的生命周期函數等。

都是在app.js文件中

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

(1).初始化數據:data

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

<img src="http://img.blog.csdn.net/20170426170416617 alt="" />

(2).生命周期函數

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

<view bindtap="viewTap"> click me </view>  

3.實現動態顯示和隱藏某個控件

<view class="{{open?'display_show':'display_none'}}">列表1</view>

data:{  
    open:false  
  },  
  showitem:function(){  
      this.setData({  
          open:!this.data.open  
      })  
  }

.display_show{  
    display: block;  
}  
.display_none{  
    display: none;  
}

4.通過 data-* 和 e.target.dateset 傳遞參數

<view class="phone_personal">{{firstPerson}}</view>

<view class="select_one" bindtap="mySelect" data-me="吃">吃</view>

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 ? 'rotateRight' :''}}"></image>  
</view>

在父級：display:flex;

justify-content:space-between;

這樣子集就會并列。justify-content:space-between;這樣子集就會分別在在倆頭

6.獲取自身的樣式e.detail.width,e.detail.height

<image class="image-style" src="../uploads/2.jpg" style="width:{{imgwidth}}px;height:{{imgheight}}px;"bindload="imageLoad" ></image>

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（操作系統）

感謝你能夠認真閱讀完這篇文章，希望小編分享的“小程序中需要注意的點有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!