2021-11-03

小程序概述

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

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

小程序的优缺点

优点1 用户体验好 不用下载安装 即开即用

优点2 上手容易 html css js

优点3 开发成本低 （资金 沟通 时间）

优点4 微信用户流量大，方便推广

缺点1 项目包大小有限制（默认不超过2M 使用分包技术 可达到 20M）

缺点2  对个人开发，功能限制 （交互 微信支付 直播）

缺点3 不能及时发布上线 微信团队人工审核（1-7个工作日）

缺点4 不能直接分享到朋友圈（ 目前测试版本可以分享)

1.小程序账号注册流程https://developers.weixin.qq.com/miniprogram/introduction/

2.小程序信息完善

1.资料完善 小程序名称和头像

2.开发管理： 开发设置 appid,appserect,服务器域名配置

3.版本管理 开发 审核 线上

4.成员管理 管理员 项目成员 体验成员

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

1.工具下载安装

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.工程创建

点击 +

选择空目录 填写项目名称

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

选择不使用云开发

工程目录

三个主体文件（作用于所有页面----不能修改名称）

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

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

tips:

1)不能加注释

2)必须加双引号，不能单引号

3）页面路径前面不能加字符  ./  /

4）配置项最后一项不能加逗号，中间必须加逗号

代码示例

（1） pages

负责页面路径的配置

tisp：

1） 页面路径前不能加字符 ./ 

2) 未指定 entrypagepath 时 数组的第一项代表小程序的初始页面（首页）

"pages": [

"pages/index/index",

"pages/logs/logs",

"pages/list/list",

"pages/my/my"

],

"entryPagePath": "pages/logs/logs",

2） window 

负责页面窗口表现（导航条 窗口背景 下拉刷新 上拉触底的距离

"window": {

"navigationBarBackgroundColor": "#f00", //16进制

"navigationBarTitleText": "web",

"navigationBarTextStyle": "white",

//black white "navigationStyle": "custom",

//default "backgroundColor": "#f00",//16进制

"enablePullDownRefresh": true,

"backgroundTextStyle": "light",//dark 或者loght

"onReachBottomDistance": 50

3）tabBar

指定tabbar的表现，以及tabbar对应的页面

tisp：

1）至少两项 最多 五项 

2） 图片不能使用网络图片 建议80*80 40kb以下

"tabBar": {

"list":[ { "pagePath": "pages/index/index",

"text": "首页",

"iconPath": "./tabs/index.png",

"selectedIconPath": "./tabs/indexFull.png" },

{ "pagePath": "pages/cart/cart",

"text": "购物车",

"iconPath": "./tabs/cart.png",

"selectedIconPath": "./tabs/cartFull.png" } ],

"color":"#333",

"selectedColor": "#f00",

"position": "bottom",

"borderStyle": "white" },

2.页面配置page.json

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。    

{ "usingComponents": { },

// 全局的window 里边的属性 页面》全局

"navigationBarTitleText": "购物车",

"navigationBarBackgroundColor": "#f00" } 

小程序逻辑层

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

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

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

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

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

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

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

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

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

小程序注册App() ***

https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

在 `app.js` 中调用 `App` 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

代码案例

// app.js

// 程序的注册

App({ // 初始化--只触发一次

onLaunch() { console.log('onlaunch'); },

// 切前台--重复触发

onShow() { console.log('onshow');

// fun() console.log(this.globalData); },

// 切后台--重复触发

onHide() { console.log('onhide'); },

onError(err) { // 错误日志 console.log(err); },

onPageNotFound() { // 重定向404 index console.log('onpagenotfound');

// 跳转q wx.redirectTo({ url: './pages/page404/page404', }) },

globalData: { userInfo: null, isLogin:false } })

在页面访问获取全局实例

页面.js

// 页面访问全局变量 getApp()

let app = getApp()

app.globalData.isLogin= true

console.log(app);

页面注册Page() ***

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

示例代码

// pages/cart/cart.js

// 页面访问全局变量

let app = getApp()

app.globalData.isLogin = true

console.log(app);

// 注册页面

Page({

// 页面的初始数据

data: { msg:"没事干", arr:[] },

// 生命周期函数--监听页面加载,只加载一次

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

// 生命周期函数--监听页面初次渲染完成，只加载一次

onReady: function () { console.log('页面初次渲染完成'); },

//生命周期函数--监听页面显示

onShow: function () { console.log('页面显示');

// wx.redirectTo({ // url: '../page404/page404', // }) },

//生命周期函数--监听页面隐藏

onHide: function () { console.log('页面隐藏'); },

// 生命周期函数--监听页面卸载

onUnload: function () { console.log('页面卸载'); },

//页面相关事件处理函数--监听用户下拉动作 1.json允许下拉刷新 2.onPullDownRefresh

onPullDownRefresh: function () { console.log("onPullDownRefresh-重新请求"); },

//页面上拉触底事件的处理函数 onReachBottom: function () { console.log('触底了，页码+1，重新请求'); },

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

// 分享到朋友圈 onShareTimeline() { } })

data数据

// 页面的初始数据

    data: {

        msg:"没事干",

        arr:[]

    },

    // 生命周期函数--监听页面加载,只加载一次

    onLoad: function (options) {

        console.log('页面加载');

        // 获取data数据  vue:this.msg

        console.log(this.data.msg);

        // 设置data数据 vue:this.msg

        // 小程序1)处理数据  =赋值 只能修改js的值

        this.data.msg = "hahha"

        // 小程序2）同步视图 setData可以修改js，同步到视图层

        this.setData({

            msg:this.data.msg

        })

场景值

https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.htm

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

获取场景值

// 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(){ }, })