小程式需要注意哪些點

小云云
發布: 2018-03-17 14:37:55
原創
1558 人瀏覽過

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

一.細節

#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 傳遞參數

{{firstPerson}}

##


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

3.小程序体验好并且小程序并非只适合低频或长尾应用

4.小程式不是應用程式商店,是OS(作業系統)

#相關推薦:

#微信小程式全域設定開發實例

#微信小程式標籤功能的開發

#微信小程式開發上傳圖片功能實例分享

######

以上是小程式需要注意哪些點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板