【微信小程序】小程序入门的目录结构及配置

【微信小程序】小程序入门的目录结构及配置

视频观看：http://edu.csdn.NET/course/detail/3081

首先我们看一下微信官方为我们提供了什么?

基础组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

详情连接：https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20161107

API

框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=20161107

小程序能做什么？让我们看一个例子，具体的看一下微信小程序能干什么！

 

 

一、小程序本身是有开发框架的，框架的核心就是相应数据绑定的一个系统，把我们的系统设计成一个逻辑层，我们可以通过框架，然后让我们的数据非常简单的保持一个同步！

下面就让我们举例来说这个问题

打开我们之前创建的文件：

Index.js就是我们的逻辑层：是用来控制我们的逻辑！

Index.wxml就是我们的视图层：是为了控制我们的视图显示！

 

 

一、在视图层，我们加一个button 按钮，点击button 按钮触发changeMotto事件

   点击

 

二、changeMotto事件的变化情况

changeMotto:function(){
    this.setData({
    motto:'你好 世界！'
    });
  },

 

源代码：

 

  
    
    我的名字是：{{userInfo.nickName}}
  
  
    内容：{{motto}}
    点击
  

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello  dudu',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    console.log(this.data.motto);
    //页面跳转
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  changeMotto:function(){
    this.setData({
    motto:'你好 世界！'
    });
  },
  //当页面加载好之后执行的
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

二、app.js文件解说： onShow事件 、onHide事件

 

  //小程序显示的时候触发
  onShow:function(){
  console.log("生命周期函数——监听小程序显示的时候触发");
  },
  //小程序隐藏的时候触发
  onHide:function(){
  console.log("生命周期函数——监听小程序隐藏的时候触发");
  },

 

源代码：

//app.js
App({
  //当程序初始化的时候执行onLaunch里面的内容
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  //小程序显示的时候触发
  onShow:function(){
  console.log("生命周期函数——监听小程序显示的时候触发");
  },
  //小程序隐藏的时候触发
  onHide:function(){
  console.log("生命周期函数——监听小程序隐藏的时候触发");
  },
  //全局的方法
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }

      })

    }

  },

  //全局属性

  globalData:{

    userInfo:null

  }

})