uni-app学习之旅（一）微信小程序

uni-app虽然使用的是vue语法不是小程序语法，但有一些规范还是比较靠近小程序的。

1、微信小程序开发准备工作

首先下载微信开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装完成后微信扫描登录

2、微信小程序项目创建

AppID如果想体验的话可以直接使用测试号创建

3、微信小程序项目结构介绍   

 pages文件夹：存放所有的页面文件

           .js文件：当前页面的所有业务逻辑

       .json文件：当前页面的配置

      .wxss文件：当前页面的样式

      .wxml文件：页面模板

utils文件夹：存放公共的工具类文件

 app.js：文件入口

app.json：项目的配置，配置一些页面的路径，页面主题配置等

app.wxss：全局的样式，整个项目都可以使用

4、简单功能体验

4.1 入口页创建App实例，实例中生命周期的方法有4个，通过log打印，大家可以编译切后台来感受一下小程序的生命周期。

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log('onLauch')
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log('onShow')
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log('onHide')
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    console.log('onError')
  }
})

4.2 创建页面，在pages文件夹下的index（此为自己页面的名字命名文件夹）文件夹右键创建page，微信开发者工具会帮我们创建带.js .wxml .json .wxss后缀的四个文件，js文件中也包含我们页面的所有生命周期。

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onLoad 页面加载")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("onReady 页面渲染完成")
  },

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

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onHide 页面隐藏")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onUnload 页面卸载")
  },

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("onShareAppMessage 分享")
  }
})

4.3 通过以下代码体验一下小程序的数据绑定以及wx:if条件判断和wx:for循环

index.js

 /**
   * 页面的初始数据
   */
  data: {
    name:'奔波儿灞',
    isChange:false,
    ages:[18,20,25,30]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onLoad 页面加载")
    setTimeout(()=>{
      this.setData({
        name:"霸波尔奔",
        isChange:true
        
      })
    },2000)
  },

index.wxml

<!--pages/index/index.wxml-->
<text wx:if="{{isChange}}">{{name}}</text>
<view wx:for="{{ages}}">{{item}}</view>

通过简单的体验感受一下微信小程序，为uni-app的学习预热一下！