介绍

作者: 易路先登 | 来源:发表于2021-07-14 10:55 被阅读0次

Runtime介绍---术语介绍
介绍
介绍😊
介绍
介绍
介绍
介绍
介绍
介绍
介绍

什么场景下使用微信分享

线下推广、线上传播
分享渠道：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手机抓包

网友评论

本文标题：介绍

本文链接：https://www.haomeiwen.com/subject/jncrpltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

介绍