微信小程序开发工具的基本应用

全局配置：

1.1配置所有页面路径：在app.json的{pages：[配置所有页面]}，将首页放置在第一位，在app.json必须写上所有页面的路径，要不然会报错，每个页面的wxss样式文件只在当前文件里有效

1.2设置tabBar导航：

"tabBar": {
"color": "#7A7E83",//字体颜色
"selectedColor": "#3cc51f",//选中时候字体的颜色
"borderStyle": "black",//tabbar边框的颜色，只有黑和白
"backgroundColor": "#fff",//背景颜色
"list": [//2-5，只能设置2-5个导航
{
"pagePath": "page/newPage/index",//导航页面路径，根据路径匹配tarbar导航是否显示
"iconPath": "image/icon_component.png",//图标图片的路径
"selectedIconPath": "image/icon_component_HL.png",//选中的时候图片的路径
"text": "首页"//按钮文本
},
{
"pagePath": "page/component/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "组件"
}
]
}

3.注册程序：app.js

设置相对应的生命周期函数（初始化完成时onLaunch,显示onShow，隐藏onHide，错误的时候onerror）

设置全局数据：globalData属性进行设置，getApp（）可获取app.js的配置对象

 

4.1.导入文件方式：<import src='文件路径'/>

<import src="a.wxml"/>

<写要导入的具体内容标签>

4.2.将整个文件内容导入并显示方式：<include  src='文件路径'/>

include将页面header.wxml的内容全部导入，相当于将所有内容都复制过来

<include src="header.wxml"/>


const openIdUrl = require('./config').openIdUrl

5.小程序应用的生命周期启示

 

一般还会将全局的数据放置到初始化全局对象的globalData这个对像上

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  //小程序显示的时候（启动/后台切换到前台的时候启动）
  onShow: function () {
    console.log('App Show')
  },
  //切换至后台，切换到其他微信页面，切换到其他程序，就会调用起这个函数
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: true,
    openid: null
  },
  // lazy loading openid
  getUserOpenId: function(callback) {
    var self = this

    if (self.globalData.openid) {
      callback(null, self.globalData.openid)
    } else {
      wx.login({
        success: function(data) {
          wx.request({
            url: openIdUrl,
            data: {
              code: data.code
            },
            success: function(res) {
              console.log('拉取openid成功', res)
              self.globalData.openid = res.data.openid
              callback(null, self.globalData.openid)
            },
            fail: function(res) {
              console.log('拉取用户openid失败，将无法正常使用开放接口等服务', res)
              callback(res)
            }
          })
        },
        fail: function(err) {
          console.log('wx.login 接口调用失败，将无法正常使用开放接口等服务', err)
          callback(err)
        }
      })
    }
  }
})

 

6.index.js:存储数据和方法（index.wxml视图页面元素相当于html）index.json表示当前页面的配置

 

Page({//表示当前文件下的page全局的page对象，所有的方法和数据

  /**
   * 页面的初始数据
   */
  data: {
    msg:'这是data里的数据',
    helloMsg: 'helloWorld',
    obj:{
      helloMsg:'欢迎词',
      otherText:'其他信息'
    },
 
  },
  changeMsg:function(){
    this.setData({
      msg:'这是改变后的内容',
 
    })
  },
  clicktap:function(e){
    console.log(e)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var appConfig =  getApp()//getApp（）是获取全局变量globalData方法下的数据的函数方法
    console.log(appConfig)
    if(appConfig.globalData.hasLogin){
      this.setData({
        msg:'已登陆完成'
      })
    }else{
      this.setData({
        msg:'还未登陆，请登录'
      })
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var  pageList = getCurrentPages()
    console.log(pageList)
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  goPage(){
    // wx.navigateTo({
    //   url: '/page/component/pages/button/button',
    // })
    wx.redirectTo({
      url: '/page/component/pages/button/button',
    })
  }
})