微信公众号、微信小程序的详细介绍

一、微信公众平台

微信公众平台（微信小程序，订阅号，服务号等），微信开放平台(常见的api)

1.平台概述

微信公众平台：（简称公众号），主要是开发者为用户提供咨询服务的一个平台

官网地址：https://mp.weixin.qq.com

2.账号分类

1.订阅号：
    为媒体和个人提供一种新的信息传播方式，主要功能是在微信侧给用户传达资讯；（功能类似报纸杂志，提供新闻信息或娱乐趣事）
    适用人群：个人、媒体、企业、政府或其他组织。
    群发次数：订阅号（认证用户、非认证用户）1天内可群发1条消息
    
2.服务号：
    为企业和组织提供更强大的业务服务与用户管理能力，主要偏向服务类交互（功能类似12315，114，银行，提供绑定信息，服务交互的）；
    适用人群：媒体、企业、政府或其他组织。
    群发次数：服务号1个月（按自然月）内可发送4条群发消息。
    
3.企业微信
	类比钉钉
	企业的专业办公管理工具。与微信一致的沟通体验，提供丰富免费的办公应用，并与微信消息、小程序、微信支付等互通，助力企业高效办公和管理。
	
4.微信小程序
	小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

二、微信小程序

1.小程序概述

微信内置的简化版的app的一种应用

2.小程序优缺点（重点）

2.1优点

1.对用户而言，不用下载，即开即用，用户体验好
2.用于开发而言，上手快，门槛低
3.开发成本低（沟通，资金，时间）
4.微信流量大，方便推广

2.2缺点

1.代码工程包大小有限制，最多2M，使用分包技术，最多可以达到20M
2.对个人开发，功能限制比较大（微信支付，社交类）
3.需要微信团队人工审核，审核时间1-7个工作日，不能及时发布上线
4.不能直接分享到朋友圈（安卓测试版目前可以实现，ios不能）

3.注册范围

个人、企业、媒体、政府、其他组织

4.注册流程

注册小程序帐号
在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。

选择注册的帐号类型
选择“小程序”，点击“查看类型区别”可查看不同类型帐号的区别和优势。

填写邮箱和密码
请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。

激活邮箱
登录邮箱，查收激活邮件，点击激活链接。

填写主体信息
点击激活链接后，继续下一步的注册流程。请选择主体类型选择，完善主体信息和管理员信息。

5.后台管理

5.1基本信息

小程序名称，头像，介绍，

服务类目
	第一次登录不能选择 游戏！！！！
		后期只能开发游戏

5.2版本信息

开发版本
	由开发者工具 点击 上传按钮 产生的版本
	可以设置为体验版本，可以做内测
	
审核版本
	由开发版本点击审核，自动生成的版本
	如果审核不通过，根据驳回信息进行修改，修改后继续提交
	
线上版本
	审核通过的版本 点击提交发布 自动产生的版本

5.3成员管理

管理员
	账号的拥有者，最高权限

项目成员
	协助管理员开发管理小程序，可以登录小程序后台

体验成员
	小程序功能上的体验

5.4开发设置

appid
	小程序在微信端的唯一标识
		新建项目，代码提交，云开发，
		微信登录
	
AppSecret(小程序密钥)	
	微信登录，高阶接口的使用
	
服务器域名
	1.所有请求数据接口，都需要在后台配置
	2.配置等一会生效

6.工具安装

安装网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

选择稳定版—一路next就行

7.项目创建

点击 +
	填写项目名称，不要有特殊符号，尽量英文
	选择项目目录
	
	appid（小程序的后台-开发管理--开发设置--appid）
		也有测试号，对功能有限制
		
	勾选不使用云开发
	
	点击新建

8.目录结构

8.1目录结构

1.pages
	放置页面的总文件夹
	index
		放置首页文件的文件夹
			index.wxml 页面的结构
			index.wxss 页面的样式
			index.json 页面的配置（窗口表现）
			index.js 页面的逻辑文件（生命周期，初始数据，事件处理函数）
	logs
		放置启动日志页面的文件夹
		
2.utils
	模块文件的文件夹
		utils.js  封装的格式化时间模块文件

3.主体文件
	app.js 全局的逻辑，注册小程序，全局方法，全局变量
	app.json 全局的配置（窗口表现，页面路径，tabbar...）
	app.wxss 全局的样式
	
4.project.config.json
	项目配置文件（自定义编辑器设置，appid）
	
5.sitemap.json
	站点地图配置
		配置 某个页面在微信内部是否可以被搜索到

8.2 自定义目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Wmo8XfS-1620017096561)(1616997976361.png)]

9.小程序配置

9.1全局配置app.json

1.json文件里不能加注释
2.不能使用单引号，必须使用双引号

3.pages 里边的路径前边不能加任何字符
4.小程序中新增或者减少页面，都需要对pages数组进行修改

5.没有指定入口文件配置项，默认pages数组里第一项，作为首页

1.pages

{
    "pages": [
        "pages/index/index",
        "pages/my/my"
    ]
}

1.2entryPagePath

启动首页

{
    "pages": [
        "pages/index/index",
        "pages/my/my"
    ],
    "entryPagePath": "pages/my/my"
}

2.window

用于设置小程序导航的文字，背景、标题文字、窗口背景色

 "window": {
        "navigationBarBackgroundColor": "#f00",//导航背景色
        "navigationBarTitleText": "web1102",	//导航标题文字
        "navigationBarTextStyle": "black",	//导航文字样式
     
        "backgroundColor": "#00f",	// 背景颜色
        "enablePullDownRefresh":true,	//是否允许下拉刷新
        "backgroundTextStyle": "light"	//下拉时 loading的样式 dark闪烁 light白色
    }

3.tabbar

指定 tab 栏的表现，以及 tab 切换时显示的对应页面;

list 属性值 最少 2 个、最多 5 个 tab

 "tabBar": {
     	//tabbar 列表选项 最少 2 个、最多 5 个 tab  
        "list": [
            {
                 	
                "pagePath": "pages/index/index",  //tabbar页面路径 	
                "text": "首页",  //tabbar文字
                "iconPath": "./tabs/index.png",  	//icon图标路径	
                "selectedIconPath": "./tabs/indexFull.png"//选中的icon图标路径
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "./tabs/my.png",
                "selectedIconPath": "./tabs/myFull.png"
            }
        ],
     		
        "color": "#333",		//tabbar文字颜色	
        "selectedColor": "#f00",	//选中的文字颜色
        "borderStyle": "black",	//tabar 上边框颜色，只在position为底部时生效
        "position": "bottom"	//设置tabbar的位置 底部或者顶部
        
    }

9.2页面配置page.json

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

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "我的",
  "backgroundColor": "#123456",
    
  "disableScroll":false //页面整体不能滚动属性，true不能滚动，默认false，可以滚动
}

9.3sitemap.json (了解)

配置小程序及其页面是否允许被微信索引

{
    "rules": [
        {
            "action": "allow", //命中该规则的页面  是否能被索引
            "page":"pages/index/index", //页面的路径
            "params": ["id","age"],   //页面参数名称的列表
            "matching": "inclusive", //页面传递的参数  包含 指定的params的参数 >= 多传或者相等
            "matching":"exact", //相等
            "matching":"exclusive",   //交集为空
            "matching":"partial", //交集不为空 少传或者相等
            "priority":1  //匹配规则的优先级，值越大越先匹配，默认从上到下匹配

        },
        {
            "action": "allow",
            "page":"*",
            "priority":3

        }
    ]
}

10.场景值

10.1场景值概述

场景值用来描述用户进入小程序的路径，通俗，就是当前用户通过什么方式进入到小程序的，比如【扫描二维码、搜索、最近的使用列表等】

场景值： 当前场景的标识！！！

10.2获取场景值

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

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

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log("onShow",options.scene);
     //3.api方法获取场景值
    let option = wx.getLaunchOptionsSync()
    console.log(option.scene);
  }

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

  /**

  • 当小程序启动，或从后台进入前台显示，会触发 onShow
    */
    onShow: function (options) {
    console.log(“onShow”,options.scene);
    //3.api方法获取场景值
    let option = wx.getLaunchOptionsSync()
    console.log(option.scene);
    }