第二部分：最簡(jiǎn)單的Demo設(shè)計(jì)使用

這個(gè)小Demo，代碼量不多：導(dǎo)航樣式、View、Text、點(diǎn)擊、JS交互的使用，主要是理解每個(gè)后綴文件的功能，然后才能更好的使用開(kāi)發(fā).......（下面代碼和源代碼沒(méi)差別，實(shí)在想要的請(qǐng)留言，謝謝。。。）

首先在index.wxml中創(chuàng)建相關(guān)控件

1. <!--創(chuàng)建一個(gè)背景為藍(lán)色的View，并且添加點(diǎn)擊事件,輸出啟動(dòng)日志-->
2. <view bindtap="bindViewTap" class="myView">
3. <text class="myView-clickK">點(diǎn)我點(diǎn)我</text>
4. </view>
5.  
6. <!--創(chuàng)建了一個(gè)text標(biāo)簽，然后執(zhí)行了JS交互，在indexindex.js中進(jìn)行賦值-->
7. <view class="usermotto">
8. <text class="user-motto">{{motto}}</text>
9. </view>
10. </view>

然后在index.wxss中設(shè)計(jì)控件位置和屬性樣式，

1. /**rpx單位是微信小程序中css的尺寸單位，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。
2. 規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，
3. 則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。開(kāi)發(fā)建議：
4. 開(kāi)發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺(jué)稿的標(biāo)準(zhǔn)。UI設(shè)計(jì)圖建議：使用
5. 設(shè)計(jì)稿使用設(shè)備寬度750px比較容易計(jì)算750px的話1rpx=1px，這樣的話，設(shè)計(jì)圖上量出
6. 來(lái)的尺寸是多少px就是多少rpx**/
7. .myView{
8. width: 200rpx;
9. height: 200rpx;
10. margin-top: -100rpx;
11. background-color: blue;
12. }
13. .myView {
14. display: flex;
15. flex-direction: column;
16. align-items: center;
17. width: 200rpx;
18. height: 200rpx;
19. margin: 20rpx;
20. border-radius: 50%;
21. }
22. .myView-clickK {
23. margin-top: 75rpx;
24. height: 50rpx;
25. color: red;
26. }
27. .usermotto {
28. margin-top: 100rpx;
29. }

涉及到交互功能，所以在index.js中，設(shè)置內(nèi)容

1. data: {
2. motto: 'Hello World，你好，世界！'
3. },
4. //事件處理函數(shù)
5. bindViewTap: function() {
6. wx.navigateTo({
7. url: '../logs/logs'
8. })
9. },

設(shè)置導(dǎo)航樣式，需要在app.json中進(jìn)行設(shè)置

效果展示：