[移动开发]小程序学习第一天（工具安装，配置，逻辑层，场景值）

微信开发简介

1.微信开发概述

概述

（1）微信开发即微信公众平台开发，将企业信息、服务、活动等内容通过微信网页的方式进行表现，用户通过简单的设置，就能生成微信网站。 （2）通俗的说，就是微信对外提供了例如聊天、支付、分享、收藏等功能，同时还提供了丰富的封装好的接口，开发者利用这些接口和功能，写入程序中，进行的开发。

目的

（1）企业开发的需要,使自己更加符合企业发展的需求 （2）个人的发展以及技能的提升 （3）发展前景大、生态系统丰富

平台

（1）微信开放平台 （2）微信公众平台

2.微信开放平台

概述

微信开放平台是微信对外提供微信开发接口的一个平台，==这些开发出来的微信接口，供第三方的网站或App使用==,使用户可将第三方程序的内容发布给好友或分享至朋友圈，第三方内容借助微信平台获得更广泛的传播。

平台地址：微信开放平台

微信开放平台提供的能力

微信分享、 微信支付、 微信登录、微信收藏、微信分享等等

产品应用

(1)网站应用开发 (2)移动应用开发 (3)第三方平台开发 (4)公众帐号开发

只有通过 开发者资质认证后，才能使用开发平台提供的能力

3.微信公众平台

3.1微信公众平台概述

微信公众平台是运营者通过公众号为微信用户提供资讯和服务的平台

3.2账号分类

微信公众平台的账号统称为公众号，包括订阅号、服务号、企业微信、小程序

4.开放平台和公众平台的区别

1.开放平台
    (1)微信对外开放接口的平台
    (2)开放的接口,供其他网站及App使用
    (3)后端程序员是开放平台开发的主力军
2.公众平台
    (1) 基于微信公众号，为微信用户提供服务的平台
    (2) 所用公众号，都属于微信内开发
    (3) 前端程序员是公众平台开发的主力军

三、认识小程序

1.小程序概述

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

内置于微信的类似于app的小型应用

2.亮点与不足

缺点：
	1.代码包大小有限制，不能超过2M(使用分包技术，可以扩展到20M)
	2.对个人开发不太友好，开发功能受限制（微信支付，直播类交互类小程序不能开发，服务类目比较少）
	3.不能及时发布上线（微信人工审核，1-7个工作日）
	
优点：
	1.对用户而言，用户体验好（扫一扫，不用安装，即开即用）
	2.对开发者，上手比较容易（html css js)
	3.对企业而言，开发成本比较低（和开发h5一样，比app开发低）

四、注册小程序账号

1.小程序账号注册流程

产品定位及功能介绍 | 微信开放文档

2.小程序信息完善

1.小程序名称  头像  简介 
	服务类目（小程序的类型）-----第一次不要选择小游戏！！！！
2.版本管理
	开发版本（体验版本）、审核版本、线上版本
3.成员管理
	管理员（最高权限）、项目成员、体验成员
4.开发管理--开发设置
	1）appid：小程序唯一表示
	2）AppSecret(小程序密钥)	用于高阶接口使用,比如解密手机号
	3）合法域名设置---没有跨域，https

五、微信开发者工具及工程创建

1.工具下载安装

稳定版 Stable Build | 微信开放文档

2.工程创建

点击 + 

选择空目录 填写项目名称

填写appid----去小程序后台 开发设置里复制即可（或者使用测试号，测试号功能受限制）

选择不使用云开发

3.工具常用功能使用介绍

演示

六、工程目录*

三个主体文件（作用于所有页面----不能修改名称）
	app.json 小程序页面路径 全局窗口的表现 tabbar
	app.js 实例注册App() 全局的逻辑
	app.wxss 全局的样式
	
四个页面文件--只针对一个页面
	xx.wxml 页面结构
	xx.json 页面的配置  当前窗口的表现
	xx.js 页面的逻辑文件（页面注册Page() data 函数）
	xx.wxss 页面的样式
	
utils.js 模块文件--->时间格式化

project.config,json 项目配置文件（appid 代码名称， 对编辑器的设置--代码是否转es5)

sitemap.json  站点地图文件   配置小程序页面在微信内部索引规则

七、小程序配置

1.全局配置app.json***

全局配置 | 微信开放文档

决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

tips:
	1）json文件 不能加注释
	2）必须加双引号
	3）属性与属性之间必须加逗号，最后一项不能加逗号
	4）页面路径 路径前边不要加字符  ./  /

代码示例

{
    "pages":[//pages 页面路径，默认数组第一项是首页
        "pages/list/list",
        "pages/index/index",
        "pages/logs/logs"
    ],
    "entryPagePath": "pages/index/index", //首页页面
    
    //窗口表现，导航条 下拉窗口 允许下拉刷新等
    "window": {
        "navigationBarBackgroundColor": "#00f",//16进制
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "white",// 可选项 white black
        "navigationStyle": "default", //如果需要自定义导航  设置custom

        "backgroundColor": "#f00",
        "backgroundTextStyle": "light", //下拉load样式  dark闪烁 light 白色
        "enablePullDownRefresh": true,//允许下拉刷新

        "onReachBottomDistance": 200

    },
    
    //tabbar页面
    "tabBar": {
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "/tabs/index.png",
                "selectedIconPath": "./tabs/indexFull.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "./tabs/my.png",
                "selectedIconPath": "./tabs/myFull.png"
            }
        ],
        "custom": false,
        "color": "#333",
        "selectedColor": "#f00",
        "backgroundColor": "#fff",
        "position": "bottom",
        "borderStyle": "black"
    },
}

2.页面配置page.json

页面配置 | 微信开放文档

对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项

{
  "usingComponents": {},
  "navigationBarTitleText": "我的",
  "navigationBarBackgroundColor": "#f00"
}

八、小程序逻辑层

1.逻辑层概述

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：

• 增加 App 和 Page 方法，进行程序注册和页面注册。

• 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。

• 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。

• 提供模块化能力，每个页面有独立的作用域。

注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

2.小程序注册App() ***

App(Object object) | 微信开放文档

注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

代码案例：

app.js

// app.js
App({
    onLaunch() {
        console.log('程序初始化');
    },
    onShow() {
        console.log('小程序运行在前台');
        // fun()

        console.log(this.aa);
    },
    onHide() {
        console.log('小程序从前台切换到后台');
    },

    //监听页面不存在
    onPageNotFound() {
        // 重定向到404页面
        console.log('页面找不到');
        wx.redirectTo({
            url: '/pages/page404/page404',
        })
    },
    //错误监听
    onError(err){
        console.log(err);
        // 生成错误日志  发送给后台
    },
    aa:"全局变量",
    isLogin:false
})

在页面访问获取全局实例

页面.js

// pages/my/my.js

// 页面获取全局变量--获取全局唯一的app实例
let app = getApp()
console.log(app.isLogin);

3.页面注册Page() ***

Page(Object object) | 微信开放文档

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

// 注册页面
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		msg:"马上下课"
	},

	/**
	 * 生命周期函数--监听页面加载（只执行一次
	 */
	onLoad: function (options) {
		console.log('页面加载');
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成（只执行一次）
	 */
	onReady: function () {
		console.log('页面初次渲染完成 ');
	},

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

		// // 重定向--关闭当前的页面，跳转到目标
		// wx.redirectTo({
		//   url: '/pages/page404/page404',
		// })
	},

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

	/**
	 * 生命周期函数--监听页面卸载(重定向，返回之前的页面)
	 */
	onUnload: function () {
		console.log('页面卸载');
	},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function () {
		console.log('重新发起请求，页面更新');
	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {
		console.log('页码+1，发起新的请求 ，老新数据拼接');
	},

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

	},
	onShareTimeline() {

	}
})

data数据

onLoad: function (options) {
    console.log('页面加载');

    // 1)获取data数据
    console.log(this.data.msg);

    // 2)修改data数据
    
    // 等于赋值--只能修改js的数据
    // this.data.msg = "再等一会"

    //  setData既能修改js 也能修改视图
    // this.setData({
    // 	msg:"1111"
    // })

    // ====== 一起用（先处理业务逻辑，再用setData更新视图）
    this.data.msg = "再等一会"
    this.setData({
        msg:this.data.msg
    })
},

4.模块化 ***

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。

模块.js

// commonjs
// module.exports = {
//   formatTime
// }

// es6规范导出
// export {
//   formatTime
// }

export default {
  formatTime
}

页面使用模块.js

//commonjs导入
// const util = require('../../utils/util.js')


//es6导入
// import {formatTime} from "../../utils/util.js"
// console.log(formatTime);


import util from "../../utils/util"
console.log(util);

九、场景值

1.场景值概述

微信开放文档

对用户进入小程序的方式的描述--（区分用户进入到小程序的方式）

2.获取场景值

可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中获取上述场景值

// app.js

// 程序的注册
App({
  onLaunch(option){
    // 1.在onLaunch生命周期获取场景值
    console.log("onLaunch",option);
  },
    
  onShow(option){
      
    // 2.在onShow生命周期获取场景值
    console.log("onShow",option);

    if(option.scene == 1008){
      console.log('执行 领取1000豆子 的操作');
    }

    // 3.获取onLunch启动时的参数
    let scene = wx.getLaunchOptionsSync()
    console.log(scene);
      
      
  },
  // 程序运行在后台
  onHide(){

  },

})