小程序2

今天学习的是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一般都无数据， 根据自己需要决定是否添加