【移動應(yīng)用開發(fā)技術(shù)】微信小程序Demo示例分析

【移動應(yīng)用開發(fā)技術(shù)】微信小程序Demo示例分析

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序Demo示例分析，在下覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。用到了倒仰樣式、Text組件、View組件和JS代碼的交互，大家要理解WXML、JS、WXSS和JSON文件的用途及相互關(guān)系。新建項目，然后在index.wxml頁面中創(chuàng)建相關(guān)控件<!--創(chuàng)建一個藍(lán)色背景的View，添加點擊事件,并輸出啟動日志-->

<view

bindtap="bindViewTap"

class="myView">

<text

class="myView-clickK">點我點我</text>

</view>

<!--創(chuàng)建了一個text標(biāo)簽，然后執(zhí)行了JS交互，通過兩個大括號，在index.js中進(jìn)行賦值-->

<view

class="usermotto">

<text

class="user-motto">{{motto}}</text>

</view>

</view>然后在index.wxss文件中設(shè)計控件位置和屬性樣式，注意：/**rpx單位是微信小程序中css的尺寸單位，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。開發(fā)建議：開發(fā)微信小程序時設(shè)計師可以用iPhone6作為視覺稿的標(biāo)準(zhǔn)。UI設(shè)計圖建議：使用設(shè)計稿使用設(shè)備寬度750px比較容易計算750px的話1rpx=1px，這樣的話，設(shè)計圖上量出來的尺寸是多少px就是多少rpx**/具體代碼如下：.myView{

width:

200rpx;

height:

200rpx;

margin-top:

-100rpx;

background-color:

blue;

}

.myView

{

display:

flex;

flex-direction:

column;

align-items:

center;

width:

200rpx;

height:

200rpx;

margin:

20rpx;

border-radius:

50%;

}

.myView-clickK

{

margin-top:

75rpx;

height:

50rpx;

color:

red;

}

.usermotto

{

margin-top:

100rpx;

}對應(yīng)頁面的交互功能邏輯寫在index.js文件中，如下所示：data:

{

motto:

'Hello

World，你好，世界！'

},

//事件處理函數(shù)

bindViewTap:

function()

{

wx.navigateTo({

url:

'../logs/logs'

})

},設(shè)置導(dǎo)航樣式，需要在app.json中進(jìn)行設(shè)置效果展示：打擊可以看到，當(dāng)我們點擊藍(lán)色區(qū)域的【點我點我】，在其下方會出現(xiàn)'HelloWorld，你好，世界！'這些文字。這就是最簡單的觸碰事件及其處理效果的示例。關(guān)于“微信小程序Demo