2.微信文件wxml、wxss与js

主要的几个文件js、wxml、wxss与前端的js、html、css相互对应。
不过微信有点自己的格式

1.编写一个简单的wxss

/* 调整整个页面布局 */
Page {
  /*居中*/
  text-align: center;
}
/* 使用类选择器选择标签。更改颜色 */
.hello {
  color: royalblue;
}

2.编写一个简单的js

//index.js
const app = getApp()

Page({
  data: {
  	//全局变量,可以在wxml中使用{{ }}取出
    word:'狗'
  },
  //函数。函数名为onClick.功能是把word全局变量的值改为'猫'
  onClick:function(){
      this.setData({word:'猫'})
  }
})

3.对应的小程序页面

<!-- 使用{{ }}取值 -->
<div class="hello">hello {{word}}</div>

<!--上次代码中的图片-->
<image mode="widthFix" src="../../img/123.jpg"></image>

<!-- 编写一个调用js的按钮.这里有个点击事件bindtap.点击后会调用onClick函数。注意这个地方不用在函数后面写() -->
<button bindtap="onClick">按钮</button>

效果图：

点击后