這里提供給大家一個最簡單的微信小程序示例Demo。愛掏網(wǎng) - it200.com
用到了倒仰樣式、Text組件、View組件和JS代碼的交互，大家要理解WXML、JS、WXSS和JSON文件的用途及相互關(guān)系。愛掏網(wǎng) - it200.com
新建項(xiàng)目，然后在index.wxml頁面中創(chuàng)建相關(guān)控件

  點(diǎn)我點(diǎn)我{{motto}}

然后在index.wxss文件中設(shè)計(jì)控件位置和屬性樣式，注意：
/**rpx單位是微信小程序中css的尺寸單位，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。愛掏網(wǎng) - it200.com
規(guī)定屏幕寬為750rpx。愛掏網(wǎng) - it200.com如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，
則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。愛掏網(wǎng) - it200.com開發(fā)建議：
開發(fā)微信小程序時設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)。愛掏網(wǎng) - it200.comUI設(shè)計(jì)圖建議：使用
設(shè)計(jì)稿使用設(shè)備寬度750px比較容易計(jì)算750px的話1rpx=1px，這樣的話，設(shè)計(jì)圖上量出
來的尺寸是多少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)我們點(diǎn)擊藍(lán)色區(qū)域的【點(diǎn)我點(diǎn)我】，在其下方會出現(xiàn)'Hello World，你好，世界！'這些文字。愛掏網(wǎng) - it200.com這就是最簡單的觸碰事件及其處理效果的示例。愛掏網(wǎng) - it200.com
更多最簡單的微信小程序Demo相關(guān)文章請關(guān)注愛掏網(wǎng) - it200.com！