位置:电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) 推荐学习资源
前言
第1章 uni-app入门
2.1.1 应用生命周期
2.2 路由
2.3 运行环境判断
2.4 页面样式与布局
2.5 template 和 block
2.7 NPM支持
2.8 TypeScript 支持
2.9 小程序组件支持
2.10 WXS
3.1 配置概要
3.2 配置项列表 pages.json
3.3 manifest.json 配置项列表
3.4 package.json
3.5 vue-config.js
3.6 uni.scss
3.7 App.vue 3.7.1 应用生命周期
3.8 main.js
4.1 JSON 简介
4.2 JSON 语法
4.3 JSON 对象
4.4 JSON 数组
4.5 JSON.parse()
4.6 JSON.stringify()转字符串
4.7 eval函数
5.1uni-app常用语法
5.2 uni-app接口的使用
5.3 uni-app中表单的使用
5.4 uni-app中参数的使用
第6章 uni-app常用组件
当前阅读教程:Uni-app入门到精通教程 > 3.3.4 h5
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 3.3.3 app-plus 下一篇: 3.3.5 mp-weixin

3.3.4 h5

image.png


自定义模板

需要使用自定义模板的场景,通常有以下几种情况:

n  调整页面 head 中的 meta 配置

n  补充 SEO 相关的一些配置(仅首页)

n  加入百度统计等三方js

使用自定义模板时,1. 工程根目录下新建一个html文件;2. 复制下面的基本模板内容,到这个html文件,在此基础上修改meta和引入js3. 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示例

小白教程网www.2d5.net

中有一个template.h5.html文件,即是此用途

关于SEO的补充说明

H5平台是SPA单页应用,普通的SEO信息即加meta字段只能在,自定义的模板html里配置首页。

SEO的时代在变,现在更有效的方式,是用uni-app同时发布一版百度小程序,这个搜索权重更高。DCloudask社区的H5版也是uni-app做的,同时发布了百度小程序,权重更高,每天来自百度的搜索量非常多。是一个可现身说法的好案例。


image.png

注意:

l  history 模式部分浏览器器不支持,iOS微信内置浏览器无法观测到URL变动,默认分享(不使用微信JSSDK的情况下)的链接为入口页链接。

l  history 模式发行需要后台配置支持

async

image.png

注意:uni-app manifest.json->h5->devServer 实际上对应 webpack devServer,鉴于 manifest json 文件,故 webpack.config.js->devServer 配置项下的简单类型属性均可在manifest.json->h5->devServer节点下配置,funciton 等复杂类型暂不支持

publicPath

配置 publicPath cdn 资源地址前缀,这样编译出来的 html 文件,引用的 jscss 路径会自动变成 cdn 上的地址。

示例

小白教程网www.2d5.net

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/(无效地址仅用作示例

小白教程网www.2d5.net

后,发布时 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

示例

小白教程网www.2d5.net

"h5": {

    "sdkConfigs": {

        "maps": {

            "qqmap": {

                //腾讯地图秘钥(key

                "key": "XVXBZ-NDMC4-JOGUS-XGIEE-QVHDZ-AMFV2"

            }

        }

    }

}


image.png

示例

小白教程网www.2d5.net

"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)毕业设计网

http://www.pc-365.net


(5)小程序编程网

http://www.4317.org


(6)计算机编程网

http://www.05423.com


上一篇: 3.3.3 app-plus 下一篇: 3.3.5 mp-weixin
毕业设计网             广告联系QQ:45157718(微信同号)