移动端引入外部字体样式，我用的是直接把字体库的字体下载
有一个H5页面功能，一个比较简单的问卷功能，嵌套在我们的微信公众号里。 选择的技术栈是Vue。 还使用了微信的登录和分享接口。
主要功能及遇到的问题：
左右切换动画路由带参数跳转 移动端引入外部字体样式 使用截图功能 使用微信界面（前端部分） 移动端屏幕适配 移动端点击页面 多次点击只执行一次 问题与ios 使用输入框时弹出键盘 掩盖按钮问题 打包项目遇到静态资源加载问题
1.左右切换动画
--首先我考虑使用Vue的移动动画库。 我看了很久，但是项目很小，所以我放弃了这个选择，开始自己手写。 我首先考虑的是过渡效果。 并找到相关文章参考。 代码如下所示：
10
11
12
13
14
15
16
17 号
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
参考：
2、带参数跳转的路由
这个就是记录，有三种方法。
1.直接在-link:to中带参数：
2、在this.$.push中带上参数：
带参数使用：与get类似，传递的参数会拼接到url上。
this.$.push({name:'home',: {id:'1'}})
this.$.push({path:'/home',: {id:'1'}})
带参数使用：只能使用name，类似post，参数不会拼接。
this.$.push({name:'home',: {id:'1'}})
参考链接：
3、移动端引入外部字体样式
在移动端引入外部样式，我使用直接从字体库下载的字体，通常带有.ttf/.otf等后缀。在File下创建一个文件，放入所有字体文件。 新建一个.css文件，相当于注册你下载的字体。 您可以自定义字体的名称，但通常它们会遵循以前的名称。 src 是文件所在的路径。
只需在需要的地方使用它：font-: ""
4.使用截图功能将其转换为图片
先下载软件包：cnpm i -S / from ''; 查看文档：点击直接生成图片并使用微信长按保存图片功能保存
10
11
(() => { //这里使用定时器是因为页面一加载完，我就会显示图片，为了防止生成图片，给点时间。
（。（“＃顶部”）， {
: true, //是否尝试使用CORS从服务器加载图片
: ,//删除打印的日志
: //这与第一个非常相似，但不能同时使用。 如果同时使用，则无效。
}).then( => {
让 = .("/jpg"); //img的路径
这。 = ; //定义一个动态的：src现在赋值给src，图片就会显示出来。
这个.$.. = "无"; // 使页面上的其他元素消失，只显示图像
});
}, 1000);
题外话：我做这件事的时候真的很困惑。 官网上的文档太少了。 当时遇到了图片跨域的问题，找了好久。 可能是我没有仔细阅读官网的参数配置文件。 浪费了很多时间，哭了。
参考链接：
5.使用微信接口（前端部分）
我们使用微信SDK接口主要用于登录和分享功能。 首先我们需要查看微信公众平台，完成权限之后再配置后端。 前端只需要请求数据并进行一些配置。 这里主要介绍分享给好友和分享到朋友圈功能：
10
11
12
13
14
15
16
17 号
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
this.code = .href; //先获取代码
if (this.code.("code=") != -1) {
(这个代码 = 这个代码。(
this.code.("code=") + 5,
this.code.("&")
）），
这个.$
.get("*****8?code=".(this.code))
.then((t) { //获取后端传递过来的参数
.("", t.data.);
.("", t.data.);
.("", t.data.);
.("", t.data.);
});
this.url = (.href.("#/")[0]);//获取配置的路径
this.$.get(`*********?url=${this.url}`).then(res => {
this.res = res.data;
wx.({
: , // 启用调试模式,
: res.data., // 必填，企业编号的唯一标识，此处填写企业编号
: res.data., // 必填，生成签名的时间戳
: res.data., // 必填，生成签名的随机字符串
: res.data., // 必填，签名，见附录1
:[
"",
“阿塔”，
"",
“他们”
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
//参考公众平台上写的：
wx.(() {
wx.em();
wx.({
:[
“：：”，
“：：”，
“：”
] //要显示的菜单项，所有菜单项见附录3
});
wx.ata({
: "*****", // 分享标题
desc: "************", // 分享描述
link: "************", // 分享链接。 链接域名或路径必须与当前页面对应的公众号JS安全域名一致。
: "*****", // 分享图标
：（）{
***** 执行结束后执行的回调
});
wx.({
: "********", // 分享标题
desc: "************", // 分享描述
link: "********", // 分享链接。 链接域名或路径必须与当前页面对应的公众号JS安全域名一致。
: "********, // 分享图标
：（）{
******
});
});
6. 手机屏幕适配
现在我们正在适应移动屏幕。 我用的是雷姆我之前见过有一个 .js 库。 然后我查了一下，发现有更好的作者放弃了，给我们提供了链接。 哈哈哈哈。 真的是太可爱了。 我要花时间仔细看看。 公司的下一个项目又来了。 我真的已经加班很久了。 为了按计划完成项目，我在完成后立即开始了新的项目。 我有点累了。 这个应该是一个APP。 我完全没有经验。 ，敖敖只能硬着头皮去做，还是要煮得恰到好处，可怜的刚毕业的狗也不敢犯错。