微信小程序篇】一. 入门 hello wxapp

微信小程序入门

准备工作

开发工具 微信开发工具下载 https://developers.weixin.qq.com/miniprogram/dev/api/

开发文档 微信开发文档 https://developers.weixin.qq.com/miniprogram/dev/api/

建议去了解html语言

1. 创建项目

2. 删除原有的目录

2.1 没错，为了了解目录结构，先全部删了。

2.2 创建基本目录，访问index

2.2.1 根目录创建src/pages/index目录结构，index下创建index.wxml，inedx.js

index.wxml 输入 hello wxapp!	// 页面布局
index.js   输入 Page({})	  // 页面入口

2.2.2 根目录创建 app.json (必须)

app.json下定义页面

{
  "pages":[
    "src/pages/index/index"
  ]
}

2.2.3 test

2.2.4 最后在根目录创建app.js

2.2.4.1 app.js 定义 app的入口

App({
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log("app launch");
  },
  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log("app onShow");
  },
  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log("app onHide");
  },

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

2.2.4.2 index.js 定义自己页面的配置

Page({

  /**
   * 页面的初始数据
   */
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log("App onLoad");
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    console.log("App onReady");
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    console.log("App onShow");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
    console.log("App onHide");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
    console.log("App onUnload");
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    console.log("App onPullDownRefresh");
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    console.log("App onReachBottom");
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {
    console.log("App onShareAppMessage");
  }

})