什么场景下使用微信分享
- 线下推广、线上传播
- 分享渠道：H5、小程序、App
- 分享方式：微信好友、朋友圈、QQ好友、微博、QQ空间
微信分享带来什么收益？
- 拉新
- 留存
- 提升用户粘性
- 品牌传播
针对分享做开发有什么好处
- 卡片标题更直观
- 内容清晰
- LOGO醒目
- 统一的分享外观、用户体验好
前端项目准备（vue）
npm install -S vue-axios vue-cookie weixin-js-sdk
前端项目目录结构
src
----api
--------index.js
----assets
-------------css
-------------img
-------------js
----components
------------activity-message
---------------------index.vue
----env
--------index.js
----pages
--------activity.vue
--------index.vue
--------pay.vue
----router
--------index.js
----util
App.vue
main.js
//src/api/index.js
export default {
api_test:'/api/test'
}
//src/env/index.js
const evnList={
dev:{
baseUrl:''
},
test:{
baseUrl:''
},
prod:{
domain:'http://m.51purse.com',
baseUrl:''
}
}
//每次手工修改项目环境变量
let currentEnv = 'prod'
//根据当前浏览器环境动态设置环境变量
let params = {
'dev-m.51purse.com':'dev',
'test-m.51purse.com':'test',
'm.51purse.com':'prod'
}
currentEnv = params[location.hostname]
export default evnList[currentEnv ]
路由
//src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import index from './../pages/index'
import activity from './../pages/activity'
import pay from './../pages/pay'
Vue.use(Router);
const routes = [
{
path:'/index',
name:'index',
component:index,
meta:{ title:'首页' }
}，
{
path:'/pay',
name:'pay',
component:pay,
meta:{ title:'充值' }
}，
{
path:'/activity',
name:'activity',
component:activity,
meta:{ title:'活动' }
}，
]
const router = new Router({
routes
})
export default router;
H5响应式方案设计
方案：
- 媒体查询
* @media screen and (max-width:768px)
* @media screen and (min-width:768px) and (max-width:1280px)
* @media screen and (min-width:1281px) and (max-width:1600px)
* @media screen and (min-width:1600px)
- flex、百分比
- 栅格布局
- Rem布局方案
（1）. viewport：视窗；设备屏幕用来展示网页的可视化区域
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
| 属性 | 作用 | 值类型 |
|---|---|---|
| width | 规定页面的宽度 | 可以为字符串"device-width"，或者正整数 |
| initial-scale | 规定页面的初始缩放比例 | 为数字，可以为小数 |
| maximum-scale | 规定页面的最大缩放比例 | 为数字，可以为小数 |
| minimum | 规定页面的最小缩放比例 | 为数字，可以为小数 |
| user-scalable | 规定是否允许用户进行拖动缩放 | yes或no,yes是允许，no则不允许 |
（2）.物理像素和网页像素
| 手机型号 | 物理像素 | 独立像素（逻辑像素） | dpr | 倍图 |
|---|---|---|---|---|
| iphone 5/5S/5E | 640*1136 | 320*568 | 2 | @2x |
| iphone 6/7/8 | 750*1334 | 375*667 | 2 | @2x |
| iphone 6p/7p/8p | 1242*2208 | 414*736 | 3 | @3x |
（3）.设计尺寸和开发尺寸
同上
Rem :
- 动态改变html的font-size值，页面元素使用rem布局，html默认大小是16px
- 设置基准值为100px
- 屏幕宽度/750*100=html font-size
var fontSize=0;
!function (n) {
var e = n.document, t = e.documentElement, i = 2160, d = i / 300, o = "orientationchange"in n ? "orientationchange" : "resize", a = function () {
var n = t.clientWidth || 320;
n > 2160 && (n = 2160),fontSize=n/d, t.style.fontSize = fontSize + "px";
document.body.style.display="block";
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);
H5添加接口代理、域名解析
接口代理
- 配置主机
（1）、Host域名解析
修改本地hosts文件
window:C:\Windows\System32\drivers\etc\HOSTS
MAC:vi /etc/hosts
通过软件修改
SwitchHosts!-win32-ia32.zip
SwitchHosts.app-map.zip
（2）配置代理
//vue.config.js
module.exports = {
devServer:{
host:'m.imooc.com',//设置主机地址
port:80,//设置默认端口
proxy:{//设置代理
'/api':{
target:'http://localhost:5000',//设置目标API地址
ws:false,//设置代理websocket
changeOrigin:false//将主机标头的原点改为目标url
}
}
}
}
- 设置端口
- 拦截请求
服务号和订阅号差异
- 服务号侧重于服务，订阅号侧重于咨询
- “订阅号”每天可以群发一次。“服务号”每月可以发表四次
- 服务号主要适用于媒体、企业、政府，订阅号还适用于个人
- “订阅号”每天可以群发一次。“服务号”每月可以发表四次
- “订阅号”不支持支付。“服务号”可申请支付。
公众号测试号注册链接
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
微信授权流程
概念理解
- 业务域名、JS接口安全域名、网页授权域名
1、业务域名 设置业务域名后，在微信内访问该域名下页面时，不会被重新排版。用户在该域名上进行输入时，不出现下图所示的安全提示。
注意事项：
（1）、可填写三个域名或路径（例：wx.qq.com或wx.qq.com/mp）,需使用字母，数字及“-”的组合，不支持IP地址、端口号及短链域名。
（2）填写的域名必须通过ICP备案的验证。
（3）、将文件MP_verify_7LApYafY2f3H1YWs.txt上传至填写域名或路径指向的web服务器（或虚拟主机）的目录（若填写域名，将文件放置在域名根目录下，例如wex.qq.com/MP_verify_7LApYafY2f3H1YWs.txt;若填写路径，将文件防止在路径目录下，例如：wex.qq.com/mp/MP_verify_7LApYafY2f3H1YWs.txt;）
(4）、一个自然月内最多可修改并保存三次，本月剩余保存次数：3
2、JS接口安全域名
调用JS-SDK的域名
3、网页授权域名
用户在网页授权页同意授权公众号后，微信会将授权数据传给一个回调页面，回调页面需此域名下，以确保安全可靠 - 开发者工具（添加开发者微信号）、人员设置（添加运营者微信号）
- 网页授权access_token和普通access_token
- UnionID
微信授权流程
- 用户同意授权、获取code
- 通过code换区网页授权access_token
- 拉取用户信息（需scop为snsapi_userinfo）
JSSDK调用流程
- 绑定域名
- 引入JS文件
- 通过config接口注入权限验证配置（接口签名）
- 通过ready接口处理成功验证
servercomponent
@vue/babel-plugin-jsx
typeorm
sequlise
stream手机抓包
网友评论