這個小Demo，程式碼量不多：導航樣式、View、Text、點選、JS互動的使用，主要是理解每個字尾檔案的功能，然後才能更好的使用開發.......（下面程式碼和原始碼沒差別，實在想要的請留言，謝謝。。。）

首先在index.wxml中建立相關控制元件

<!--建立一個背景為藍色的View，並且新增點選事件,輸出啟動日誌-->
  <view  bindtap="bindViewTap" class="myView">
    <text class="myView-clickK">點我點我</text>
  </view>

<!--建立了一個text標籤，然後執行了JS互動，在indexindex.js中進行賦值-->
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

然後在index.wxss中設計控制元件位置和屬性樣式，

/**rpx單位是微信小程式中css的尺寸單位，rpx可以根據螢幕寬度進行自適應。
規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，
則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。開發建議：
開發微信小程式時設計師可以用 iPhone6 作為視覺稿的標準。UI設計圖建議：使用
設計稿使用裝置寬度750px比較容易計算750px的話1rpx=1px，這樣的話，設計圖上量出
來的尺寸是多少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;
}

涉及到互動功能，所以在index.js中，設定內容

data: {
    motto: 'Hello World，你好，世界！'
  },
  //事件處理函式
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },

設定導航樣式，需要在app.json中進行設定

效果展示：