前端实习——微信小程序(1)

一、微信公众平台

公众平台，又叫公众号，以宣传、自媒体性的事情，提升自身或企业影响力，也有一些个人和组织进行卖产品。

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

1.微信公众号分类：

(1)订阅号：

​ 订阅号：为媒体和个人提供一种新的信息传播方式，主要功能是在微信侧给用户传达资讯；（功能类似报纸杂志，提供新闻信息或娱乐趣事）

​ 适用人群：个人、媒体、企业、政府或其他组织。(哪些组织可以注册订阅号)

​ 群发次数：订阅号（认证用户、非认证用户）1天内可群发1条消息。

(2)服务号：

​ 服务号：为企业和组织提供更强大的业务服务与用户管理能力，主要偏向服务类交互（功能类似12315，114，银行，提供绑定信息，服务交互的）；

​ 适用人群：媒体、企业、政府或其他组织。

​ 群发次数：服务号1个月（按自然月）内可发送4条群发消息。

(3)企业微信：

类似于钉钉，企业内部的人员办公用。

打卡、申请考勤

(4)小程序：

官网：https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

8.开发者工具

集开发、测试、上线于一身的可视化工具

(1)

9.第一个微信小程序

使用开发者工具快速生成

1.开发者工具页面：

菜单栏

常用工具栏

模拟栏

2.关于编译

我们写前端代码开发小程序(伪app)（java、android、ios）

html/css/js编译成

10.目录结构说明

根目录下：

app.js:[App()]小程序应用实例注册文件->Vue中的main.js(new Vue())

app.json:小程序全局配置文件 存储的是json字符串 对所有页面都生效

app.wxss：小程序全局样式文件 css

project.config.json:工具的配置文件，不需要手动修改此文件

sitemap.json:借鉴的网站的知识，觉得微信内是否搜索到你的小程序

文件夹

utils 是存储我们的公共方法，开发者自己定义，通过模块化暴露，不使用

pages 存储我们每一个个压面，小程序的规范，更多的是见名知意

每个文件夹区分页面

每个文件夹包含四个文件

page.wxml ->结构文件>

小程序

11.关于app.json的全局配

Pages属性

1.我们可以通过直接在pages键新建文件地址，会自动生成文件

2.可以通过目录结构通过点击鼠标的新建page，会自动生成目录地址。

*原理：新建的文件必须在pages属性中显示注册。*

数组的第1项代表默认首页。

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

配置小程序（全局和局部、sitemap配置）

场景值

逻辑层：app.js [page].js wxml语法

Git管理笔记

第1次下载：

git clone https://gitee.com/qqcloud/bj_2020_02_10_5_Course.git

以后，老师更新了。再下载时只需要执行 *git pull*

*\注意事项：不要直接修改我的文件。不要直接修改我的文件。不要直接修改我的文件。不要直接修改我的文件。*

二、知识梗概

1.关于app.json

Pages:定义页面的路径

​ Pages/index/index

​ 第一个index代表index文件夹

​ 第二个index代表的是index.wxml

Window

​ 设置全局的标题文字

​ 设置全局的标题颜色 balck、white

​ 设置全局的标题背景 十六进制

​ 自定义标题 (default|custom)

​ 设置背景颜色:结合ebablePullRefresh

tabBar

首页、购物车页、个人中心我的页面

"tabBar": {
    "list": [
	"color": "#00f",默认文字颜色
    "selectedColor": "#f00",选中文字颜色
    "backgroundColor": "#ff0",
    "borderStyle": "balck",
    "position":"top",//tabBar位置，默认到了上面没有图标
      {
       "text": "首页",//按钮显示文本
        "pagePath": "pages/shouye/shouye",//按钮路径
		 "iconPath": "iconPath",//默认展示图标
		 "selectedIconPath": "selectedIconPath"//选中时按钮图标
      }
    ]
  }

2.页面配置 page.json

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象

注意事项

直接写window中的属性就可以，不用把window中的键名写到配置文件中

disableScroll:是否禁止页面滚动，全局页面下不能配置

如果某个页面不是长页面，就是单屏的，就不允许滚动

3.sitemap.json

借鉴的是网站的知识点

SEO、站点地图(网页的地址)

索引：搜索到

rules规则

规则数组的对象

{
	action:必须 allow|disallow
	page:必须 对应的规则路径 *(所有页面)
	parmas:
	matching:
	priority:
	
}

matching对params进行作用的

访问一个页面需要进行传参

/datail.html?Id=商品的id

/user?Id=用户的id

默认小程序页面是会被小程序搜索到的

4.编译模式

开发时帮助很大

5.页面收录

1.面向用户的，开启

2.内部使用的，关闭

6.场景值

概念：用来描述用户进入小程序的路径

应用：通过不同的场景，可以直接访问某一个页面

模拟两个场景：

kfc:

1.首先进入kfc公众号，进入的小程序(进入预点餐页面)

2.直接前台kfc小程序码(直接进入点餐页面|有优惠券)

如何获取场景值

不同的场景值肯定不一样，进一步判断就可以

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

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html

scene

onLaunch和onShow回调函数的第一个参数获取场景值

 onShow:function(options){
    if(options.scene==1011){
      console.log('从公众号进入')
    }
  }