第二部分：最简单的Demo设计使用

这个小Demo，代码量不多：导航样式、View、Text、点击、JS交互的使用，主要是理解每个后缀文件的功能，然后才能更好的使用开发.......（下面代码和源代码没差别，实在想要的请留言，谢谢。。。）

首先在index.wxml中创建相关控件

1. <!--创建一个背景为蓝色的View，并且添加点击事件,输出启动日志-->
2. <view bindtap="bindViewTap" class="myView">
3. <text class="myView-clickK">点我点我</text>
4. </view>
5.  
6. <!--创建了一个text标签，然后执行了JS交互，在indexindex.js中进行赋值-->
7. <view class="usermotto">
8. <text class="user-motto">{{motto}}</text>
9. </view>
10. </view>

然后在index.wxss中设计控件位置和属性样式，

1. /**rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。
2. 规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，
3. 则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。开发建议：
4. 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。UI设计图建议：使用
5. 设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px，这样的话，设计图上量出
6. 来的尺寸是多少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中，设置内容

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

设置导航样式，需要在app.json中进行设置

效果展示：