首先微信的使用非常方便。

app 的使用需要用户下载，非常麻烦。

针对这一点，小程序基本可以解决。

不过小程序也存在一个类似的问题，那就是无法主动和用户沟通。

小程序的设计理念就是用完即走。

在如今流量为王的时代，如果对用户进行精耕细作，就成为一件很重要的事情。

几个模块

微信公众号的鉴权流程+注意点

微信公众号的消息推送

微信公众号的小程序跳转

微信公众号的踩坑指南

参考资料

微信公众号的鉴权流程+注意点

微信配置

测试环境

测试公众号地址：测试文档地址

每个微信可以对应一个测试用户。

配置

需要配置对应的域名。

• JS 接口安全域名。（wwww.baidu.com）

• 体验接口权限表-网页服务-网页账号 修改（wwww.baidu.com）

微信的缓存

微信页面缓存问题

经过实际认证，发现微信确实存在缓存问题。

需要前端打包添加指纹， nginx 添加 no cache 等

对付微信的浏览器缓存，首先是 css/js/html/image 等静态资源文件打包的时候指定版本号。

这个一般的 webpack 等打包时已经自带了。

但是实际发现还是会存在问题，那就是在 nginx 处理时，指定不做缓存。

如下：

server {
    listen  8080;
    server_name  localhost;

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html/;
    index  index.html  index.htm  web_ok.html;

    location /wxapp-front {
        alias /usr/share/nginx/html/wxapp-front;
        index index.html index.htm;
        try_files $uri $uri/ /wxapp-front/index.html;
        # kill cache
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        if_modified_since off;
        expires off;
        etag off;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico|js|css)$ {
        access_log    off;
    }

    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }
}

ios 和 andriod 的系统差异，导致 h5 js 获取时间的时候不兼容。

iOS12 机型无法获取请求

现象

前端请求后端，页面一片空白。后端未收到请求。

原因

关于跨域请求无法在ios12中正常请求，并且返回状态码为0，后端日志未收到get/post请求，仅收到options请求。

如果你的请求是一个跨域请求，并且你手动添加了请求头，那么就是一个复杂请求，浏览器会先发送一个options请求进行预检（判断是否被服务器允许），预检失败则get/post请求不会正常发送，成功则继续。

公众号作为流量的入口，定位比较轻量。

一些复杂的操作，比如开户+交易查询等，小程序的操作体验会更好。

考虑到开发成本等，就会直接进行小程序跳转。

小程序跳转的方式

基于公众号 js

实现比较麻烦，不容易验证。

基于 schema url

基于链接，相对简单。

基于公众号 js

js 文档

定义模板

生产环境需要申请，一般审核比较严格。

如果申请通过，测试环境可以直接进行配置。

比如模板内容：

{{first.DATA}} 
消息类別：{{keyword1.DATA}} 
通知内容：{{keyword2.DATA}} 
{{remark.DATA}}

在 ios 系统，因为没有物理返回按键。

内嵌在微信浏览器的 h5 会在下方添加一个导航栏，方便用户来回的操作。

但是这存在一个问题，如果我们的 h5 最下方有内容，或者页面排版比较紧凑，会导致页面变形，遮挡等问题。

解决方案

协商

尽量页面不要铺满。

解决

隐藏掉对应的导航栏

隐藏导航栏的方式

mounted() {
    this.back();
}，
methods: {
//监听微信自带的返回按钮
//写入空白的历史记录 
pushHistory() {
//写入空白历史路径
  let state = {
    title: 'title',
    url: "#"
  }
  window.history.pushState(state, state.title, state.url)
},
back() {
  this.pushHistory();
  window.addEventListener("popstate", function (e) {
    location.href = ''（此处为要跳转的制定路径）
  }, false);
},
}

步骤一 通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装
npm i @vant/weapp -S --production

通过对中文部分进行转码，然后用户端解码方式。

解决方案

java 服务端

java的转码和解码方式：

转码：

URLEncoder.encode('text','UTF-8');

微信公众号开启服务器配置流程及注意事项

现象

测试环境使用没有任何问题，因为测试环境的菜单全部是通过接口创建的。

但是生产环境在想监听消息，启用了【基本配置】-【服务器配置】之后，就会导致运营配置的菜单+自动回复失效。