今天学习的是wxhl和js以及wxss的基本写法内容。
新建了一个mycenter的页面， 每个页面是4个标准文件组成。 js，wxss，wxhl，json
运行效果如下图
下面贴上代码
mycenter.wxss，里面的common.wxss是引用另外一个样式文件， 一般是把某些样式专门写在某个样式文件，需要的地方这样引用即可。
不过我个人认为既然是抽离出来通用的样式，可以直接放在app.wxss文件里面， 这样全局生效。比如我在app.wxss里面加了一个样式.bold{ font-weight: bold; }这样无论在哪个页面，写class=‘bold’ 就是加粗字体效果了。
/* pages/mycenter/mycenter.wxss */ /* * 可以导入别的样式文件 * @import "common.wxss"; */ .button{ background-color: #05adea; color: #ffffff; } /* 单位是rpx,不同的设备下 1rpx 显示的效果略有不同 */ /* .button,.button2{ width: 630rpx; height:96rpx; margin-top:80rpx; border-radius:6rpx; font-size:36rpx; color: #05adea; } */mycenter.wxhl 这个里面的注释比较详细不多解释了
<!-- 这个class用的app.wxss里面的，公共的样式，若当前页面的wxss和app.wxss里面有相同的class名称，则以当前页面的wxss里面的为准 --> <view class="bold">数据类型</view> <!-- isshow这个变量控制是否显示 --> <view wx:if='{{isshow}}'> <view>后台传来的字符串是：{{mystr}}</view> <view>后台传来的数字是：{{num}}</view> <!-- 做一个判断 --> <view>mun与5比较： <label wx:if='{{num<5}}'>num小于5</label> <label wx:elif='{{num>5}}'>num大于5</label> <label wx:else>num等于5</label> </view> <view hidden="{{isshow?true:false}}"> 隐藏中 </view> <button bindtap="autoaddnum">点击一次就加1</button> <!-- bindtap后面的autoaddnum是js里面的function名称，等同java里面的action名。catchtap和bindtap功能相同，区别是catchtap不冒泡，也就是有form表达有包含关系时不触发别的action --> </view> <text>\n</text> <!-- 换行作用 --> <view class="bold">勾选类功能</view> <!-- 勾选 --> <checkbox checked="{{isshow}}"> 是否默认被勾选</checkbox> <!-- 选中按钮 --> <switch bindchange="changeswitch">这是一个开关按钮，开或者关上面的数字变成100</switch> <text>\n\n</text> <view class="bold">遍历固定写死的数组列表</view> <!-- 数组 --> <view wx:for-items="{{[0, 1, 2, 3, 4]}}">第 {{item}} 个 </view> <text>\n</text> <view class="bold">遍历后台传来的数组列表</view> <!-- 遍历数组列表 index是默认的下标名称， item是默认的数据名称 可以用wx:for-index 和 wx:for-item 来自定义他们的名称。 wx:for也可以用在block标签，block类似div标签 --> <view wx:for="{{array}}"> 第{{index}}个是: {{item.msg}} </view> <text>\n</text> <!-- 看js里面如何在数组里面新增一个元素 --> <view class="bold">自动添加一个按钮</view> <!-- key必须唯一，作用类似id或者name，可以写固定字符串，也可以用*this表示数据本身的名称nums（等同使用固定字符串nums） --> <switch wx:for="{{nums}}" wx:key="*this" style="display: block;"> {{item}} </switch> <!-- 这里使用是的当前页面mycenter.wxss里面的样式，mycenter.wxss里面的只在当前页面有效 --> <button bindtap="addoneoff" class="button">点击在添加一个开关</button> <text>\n</text> <view class="bold">wxs模块引用</view> <!-- 有点类似html里面的引入或者写js --> <!-- 引用wxs文件的模式 --> <wxs src="mycenter.wxs" module="mywxsfile" /> <view>显示mycenter.wxs文件里面的变量：{{mywxsfile.testtext}}</view> <view>显示mycenter.wxs文件里面的函数bar：{{mywxsfile.bar('yulisao')}}</view> <view style="color:red">显示mycenter.wxs文件里面的函数substr：{{mywxsfile.substr('yulisao',1,3)}}</view> <!-- wxs标签模式 这里有点像写了一个javascripit --> <wxs module="mywxs"> //<!-- 自定义模块名字 --> var msg = "我是来自wxs标签"; //<!-- 此时私有 --> module.exports = { //<!-- 对外共享 --> msg : msg, } </wxs> <view> 显示wxs标签里面的信息是：{{mywxs.msg}} </view>mycenter.js 新建之后自动会有data、onLoad、onReady、onShow、onHide、onUnload、onPullDownRefresh、onReachBottom、onShareAppMessage等。整体和app.js的结构一样，区别大点的就是data里面的定义的数据只在mycenter这个页面有效，而app.js里面的globalData的数据全局有效。
// pages/mycenter/mycenter.js Page({ /** * 页面的初始数据 * 支持字符串，数字，布尔值，对象，数组 * 在wxhl里面使用时候用两个大括号中间变量名的形式调用 * 如{{mystr}} */ data: { mystr: 'mystr is a', // 定义了字符串数据 num:1, // 定义了数字 array: [{ msg: '1' }, { msg: '2' }, { msg: '4' }, { msg: '5' }], //定义数组 isshow: true, // 定义布尔型 //列表测试数据 objectArray: [ { id: 2, obj: 'obj2' }, { id: 1, obj: 'obj1' }, { id: 0, obj: 'obj0' }, ], nums: [1, 2, 3, 4] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 * 只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮 */ onShareAppMessage: function () { return { title: '我的分享', // 转发名称 path: '/pages/center/center?id=123' //当前页面 path ，必须是以 / 开头的完整路径 } }, // 按一次加1按钮 功能实现 autoaddnum: function (){ let currentnum = this.data.num; // 获取当前number的值 console.info("当前num："+ currentnum); currentnum = currentnum + 1;//每次加1 //重新给num赋值 this.setData({ num: currentnum }) }, // 开关按钮改变时触发 changeswitch: function (){ this.setData({ num: 100 }) }, addoneoff: function (e) { // 往数组里面新增一个元素 this.data.nums = [this.data.nums.length + 1].concat(this.data.nums) this.setData({ nums: this.data.nums }) } })mycenter.wxs 是外部的js文件，可以理解为mycenter.js抽取出来给大家共用的
/* * 这个文件类似单独的js文件 * wxs 标签类似 JavaScript标签 * 这个文件可以被别的wxs文件或者wxhl里面的wxs标签引用 */ //var tools = require("./tools.wxs"); // 引用别的wxs文件 //每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。 var testtext = "我来自wxs里面"; // 在wxs里面定义一个变量 // 在wxs里面定义一个函数:拼接字符串 var bar = function (msg) { return "我是来自wxs的"+msg; } // 在wxs里面定义一个函数：截取字符串 function substr(str, a, b) { return str.slice(a, b); } //一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现 //没有写这wxhl无法直接使用testtext这个变量 和 函数 module.exports = { testtext: testtext, bar: bar, substr: substr };mycenter.json一般都无数据， 根据自己需要决定是否添加
来源：51CTO
作者：玉离骚
链接：https://blog.csdn.net/qq_29539827/article/details/101052338