 |
位置：电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：Uni-app入门到精通教程 > 3.3.4 h5 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 3.3.3 app-plus | 下一篇： 3.3.5 mp-weixin |
3.3.4 h5
自定义模板需要使用自定义模板的场景，通常有以下几种情况： n 调整页面 head 中的 meta 配置 n 补充 SEO 相关的一些配置（仅首页） n 加入百度统计等三方js 使用自定义模板时，1. 工程根目录下新建一个html文件；2. 复制下面的基本模板内容，到这个html文件，在此基础上修改meta和引入js；3. 在 manifest.json->h5->template 节点中关联这个html文件的路径。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title> <%= htmlWebpackPlugin.options.title %> </title> <script> document.addEventListener('DOMContentLoaded', function() { document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px' }) </script> <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" /> </head> <body> <noscript> <strong>Please enable JavaScript to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> 在hello uni-app示例中有一个template.h5.html文件，即是此用途 关于SEO的补充说明 H5平台是SPA单页应用，普通的SEO信息即加meta字段只能在，自定义的模板html里配置首页。 但SEO的时代在变，现在更有效的方式，是用uni-app同时发布一版百度小程序，这个搜索权重更高。DCloud的ask社区的H5版也是uni-app做的，同时发布了百度小程序，权重更高，每天来自百度的搜索量非常多。是一个可现身说法的好案例。
注意： l history 模式部分浏览器器不支持，iOS微信内置浏览器无法观测到URL变动，默认分享（不使用微信JSSDK的情况下）的链接为入口页链接。 l history 模式发行需要后台配置支持 async
注意：uni-app 中 manifest.json->h5->devServer 实际上对应 webpack 的 devServer，鉴于 manifest 为 json 文件，故 webpack.config.js->devServer 配置项下的简单类型属性均可在manifest.json->h5->devServer节点下配置，funciton 等复杂类型暂不支持 publicPath配置 publicPath 为 cdn 资源地址前缀，这样编译出来的 html 文件，引用的 js，css 路径会自动变成 cdn 上的地址。 示例 以 hello-uniapp 发布 H5 时为例 未配置 publicPath 时，发布时 index.html 中的结果： <script src=/h5/static/js/chunk-vendors.803ce52d.js></script> <script src=/h5/static/js/index.34e8497d.js> 配置 publicPath 为 https://www.cdn.com/h5/（无效地址仅用作示例） 后，发布时 index.html 中的结果： <script src=https://www.cdn.com/h5/static/js/chunk-vendors.803ce52d.js></script> <script src=https://www.cdn.com/h5/static/js/index.34e8497d.js> 注意 打包部署后，在服务器上开启 gzip 可以进一步压缩文件。 sdkconfig示例 "h5": { "sdkConfigs": { "maps": { "qqmap": { //腾讯地图秘钥（key） "key": "XVXBZ-NDMC4-JOGUS-XGIEE-QVHDZ-AMFV2" } } } }
示例： "h5": { "optimization": { "treeShaking": { "enable": true } } } 【uniapp参考资料】 （1）uni-app跨平台开发 入门到实战 https://ke.qq.com/course/package/26512 （2）uni-app 完整商城界面设计实战 https://ke.qq.com/course/2381059 （3）基于vue的uniapp商城完整项目源代码 https://ke.qq.com/course/3064977 （4）毕业设计网 （5）小程序编程网 （6）计算机编程网 |
|
| 上一篇： 3.3.3 app-plus | 下一篇： 3.3.5 mp-weixin |
