js-小程序入门-基础(一)

微信读书 里面有一本《微信小程序开发入门与实践》相当不错 ，有助于入门。

一 小程序概念

二 全局配置

1 根目录下的 app.json 文件是对整个小程序的全局配置。

• pages ：页面路径列表。
  数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改（类似于注册）。
• window : 全局的默认窗口表现。
  用于设置小程序的状态栏、导航条、标题、窗口背景色。
• tabBar ：底部 tab栏。
• networkTimeout ：各类网络请求的超时时间，单位均为毫秒。

   "networkTimeout": {
		"request":10000,
		"uploadFile":10000,
		"downloadFile":10000
	}

    // app.json
    "tabBar": {
	    "list": [
	      {
	        "pagePath": "pages/index/index",
	        "text": "首页",
	        "iconPath": "images/icona.png",
	        "selectedIconPath": "images/icon_a.png"
	      },
	      {
	        "pagePath": "pages/logs/logs",
	        "text": "日志",
	        "iconPath": "images/iconb.png",
	        "selectedIconPath": "images/icon_b.png"
	      }
	    ]
  }

2 根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，如果没有 sitemap.json ，则默认为所有页面都允许被索引。

三 注册程序及程序生命周期

3 app.js 是小程序 App的脚本代码。
App() ：注册小程序，指定小程序的生命周期回调，声明全局变量等等。
必须在 app.js 中调用，必须仅且只能调用一次。不然会出现无法预期的后果。

4 globalData 设置全部变量

App({
  onLaunch (options) {//生命周期回调——监听小程序初始化
    // Do something initial when launch.
  },
  onShow (options) {//生命周期回调——监听小程序启动或切前台。
    // Do something when show.
  },
  onHide (options) {//生命周期回调——监听小程序切后台。
    // Do something when hide.
  },
  onError (msg) {//错误监听函数。
    console.log(msg)
  },
  onPageNotFound(res) {//页面不存在监听函数。
    wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  }，
  globalData: {
      
  }
})

四 页面注册及页面生命周期

Page(): 注册小程序中的一个页面, 指定页面的初始数据、生命周期回调、事件处理函数等

 data: {//页面的初始数据
    logs: []
  },
  onLoad: function () {//生命周期回调—监听页面加载
      console.log("page execute: onLoad.");
  },
  onReady: function() {//生命周期回调—监听页面初次渲染完成
    console.log("page execute: onReady.");
  },
  onShow: function() {//生命周期回调—监听页面显示
    // Do something when page show.
    console.log("page execute: onShow.");
  },
  onHide: function() {//生命周期回调—监听页面隐藏
    // Do something when page hide.
    console.log("page execute: onHide.");
  },
  onUnload: function() {//生命周期回调—监听页面卸载
    // Do something when page close.
    console.log("page execute: onUnload.");
  },
  onPullDownRefresh: function() {//监听用户下拉动作
    // Do something when pull down.
    console.log("page execute: onPullDownRefresh.");
  },
  onReachBottom: function() {//页面上拉触底事件的处理函数
    // Do something when page reach bottom.
    console.log("page execute: onReachBottom.");
  },

五 模块化

引入模块。通过 module.exports 或 exports 暴露的接口

    //util.js
	function formatTime(date) {...}
	
	module.exports.formatTime = formatTime
	或
	module.exports = { formatTime: formatTime}
	//使用
	var util = require('..util.js');
	util.formatTime();

参考
小程序开发快速入门教程（附源码）

官网

微信小程序开发框架、资源-干货汇总

小程序优秀项目源码汇总