微信小程序入门（持续更新）

 

微信小程序的主要文件介绍：

      . js：脚本文件

      .json：配置文件

      .wxss：样式表文件

     .wxml：页面

微信小程序差不多也是和mvc模式差不多的，采用数据和页面分离的模式，在js上写的数据可以放到wxml上面

 

 

 

1.在一个js文件上引用其他js文件上的代码：

要引用的js文件：

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

引用：

//logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
        // return '我是时间'
      })
    })
  }
})

 -----------------------------------------------------------------------

调用app.js里面的globalData()的数据：

  globalData: {  userInfo: null,  time:'2017-9-22' 4 } 

调用：

var data = getApp();

 onLoad: function (options) {
    console.log(data.globalData.time);
  },

---------------------------------------------------------------------

调用app.js里面的方法：

  getUserName: function(){
           return '我是函数';
  } ,
  globalData: {
    userInfo: null,
    time:'2017-9-22'
  }

调用：

    this.setData({
      username: data.getUserName()
    })

跟Java的数据，方法调用差不多。

 

微信小程序的结构：

小程序的周期：

 

 demo：

温馨提示：代码的末尾千万不要加上；不然会报错！！！还有，没有任何代码的文件也会报错！！！

在页面的json里面，我们直接写配置就行了，不用写window，这是和app.json（全局）的区别

页面结构：

背景那里需要开启下来刷新才能看到。

 

 

逻辑层：

app.js是控制整个小程序的生命周期

其他的 index.js是控制页面的生命周期

微信小程序的生命周期：

onLaunch:小程序初始化

onShow:小程序显示

onHide:小程序隐藏

onError:小程序出错

 any：其他

页面的生命周期：

data：页面数据

onLoad：监听页面加载

onReady：页面加载成功

onShow：页面显示

onHide：页面隐藏

onPullDownRefresh：监听页面下来动作

onReachBottom：页面上拉触底

onShareAppMessage：用户点击由上角分享

Any：其他函数 

 

wxml:

- rpx(规定屏幕宽度为750rpx，1rpx=1物理像素)（换算：750/当前宽度 = 比率）

- 样式引入（@import ，“相对路径”）

-选择器的部分支持（.class ,  #id , element （标签）, ::before（第一个） , ::after（最后一个））

 

flex：

 

 注意：

当flex为横向的时候，他的猪轴就是为x轴，当他为纵向的时候，他的住轴为y轴，相对的就是交叉轴（x，y）;

对齐：justify-content（x）和align-items（y）仅仅对自己有效，不对子级发生效果！！！

注意！容器（如：view）的属性只能用容器上的，项目（如：text）上的属性只能用项目上的。

 

循环：

条件循环：

<view wx:if="{{age<80}}">
小于
</view>
<view wx:elif="{{age==80}}">
等于
</view>
<view wx:else="{{age>80}}">
大于
</view>

 　　for循环：

<view wx:for="{{data}}">

{{index}}

姓名：{{item.name}}

，年龄：{{item.age}}

</view>

  data: {
    name: app.globalData.quan,
    age:80,
    data:[
      {name:'小明',age:'10'},
      { name: '小红', age: '11' },
      { name: '小黄', age: '12' },
      { name: '小良', age: '13' },
      { name: '小黑', age: '14' }
    ]
  },

或者：

<view wx:for="{{data}}" wx:for-item="v" wx:for-index="a">

{{a}}

姓名：{{v.name}}

，年龄：{{v.age}}

</view>