关闭

H5活动页面2小时快速开发

时间: 2019-04-25阅读: 889标签: h5

前言

这是一套我自己经常用的H5活动页面开发脚手架,针对目前一般的H5页面,基本上2小时就能完成相关的开发内容。俗话说:工欲善其事必先利其器,有了这么一套H5页面脚手架,我相信80%的H5页面,都能够在2小时当中开发完成。
脚手架是基于react的,这里已经帮您做了如下几个基本事情

  • 页面缩放,基于宽度为750px的视觉稿,当然您也可以自行修改
  • 页面微信分享,只需要配置获取分享相关的签名接口,就可以实现
  • 预加载loading,如果您需要,基于create.js 的 preload模块实现
  • 包含了Axios,你可以直接使用Axios请求相关的接口


项目地址

https://github.com/mmcai/single-page-react-h5


目录结构说明

|——build(代码编译后所在的文件目录)
|——config(webpack相关的配置目录)
|——node_modules
|——public(html模板,favicon及其他静态资源存放目录)
|——scripts(webpack各个环境脚本执行文件存放目录)
|——src(项目源码存放路径)
|   |——components(组件存放目录,如果有?)
|   |——containers(具体页面存放目录)
|   |——...(具体看代码)
|   |——public(一些第三方库包含的相关资源存放的目录,比如swiper,animate.css)
|   |——utils(工具函数存放目录)
|   |——index.js(webpack入口执行文件)
|   |——registerServiceWorker.js(生产环境中处理文件的缓存,用来加快页面访问速度的)
|
|——.gitingnore
|——LICENSE
|——package-lock.json
|——package.json
|——README.md


如何使用

确认您当前的系统是否具有以下相关环境(这里说的是window系统下)
- git
- node(npm)

为了确保下载npm的体验更好,您可以选择以下两种方式之一

1、安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

2、修改npm下载源
npm config set registry https://registry.npm.taobao.org

第一步

npm install 或者 cnpm install 安装相关的依赖包

第二步

npm run start 启动项目

第三步

编写您的活动页面相关业务逻辑代码

第四步

npm run build 打包(编译项目)


其他

如果您的页面需要配置微信当中的分享,请保证与您联调的后台接口返回内容是如下格式的

{
    success: true,
    data: {
        "debug": true,
        "appId": "wxb17a5a75c9ad192b",
        "timestamp": "1533897246",
        "nonceStr": "b9aab9c2ii",
        "signature": "d1c126bbcaff2f48d415fd71e92684978c0e1a1c",
        "jsApiList": [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareWeibo",
            "onMenuShareQZone"
        ]
    }
}

或者您修改utils文件夹下面的Weixin.js文件

关于资源预加载

  • 在config.js配置资源的根路径window.BaseUrl
  • 在webpack的入口文件index.js里面配置资源列表Manifest
  • 引入工具函数import PreLoad from './utils/PreLoad';
  • 执行资源预加载函数,然后再回调函数里面初始化页面


关于日常的H5活动页面的一些开发建议

如果您是一个H5活动页面的开发者,我相信,你一定经历过一周内好几个活动页面的同时开发,同时要求上线的需求。一开始在公司工作流程不怎么规范的时候,基本上运营人员,在即将做活动的前一天下午才会告诉你,我们有个活动页面,能不能明天上,最迟也要后天上线,我想您一定是崩溃的,但是我们的工作的一部分就是服务他们,所以抱怨几句,往往还是需要做这些临时的需求的。
H5活动页面一般分为几种:

  • 常规活动(促销类的,拉新类的)
  • 系列互动(一揽子促销)
  • 运营数据报告类的
  • 游戏类的
  • ...

H5活动页面的特点往往是:生命周期短,上线时间紧张
总的来说就是:快速上线,快速扔掉。
这个时候如何保质保量,快速做好,快速上线,就是一门艺术了,根据公司的配置不同会有好多情况。
我这边的原则就是,分析活动页面上那些是需要用户操作的,那些是展示的
所有会让用户填写和操作的地方都用代码实现,其他一切展示的内容,统统使用图片。
前端页面里面大量使用图片,可能会让自己不舒服,因为没啥技术含量,但我们做事情不是给自己看的,别人才不管你代码如何,只要你的项目能够按时保质保量的上线,后台能够有足够优秀的数据,就妥了。
把有限的生命浪费在那些重复的,而且你已经会的,写过千八百遍的代码上不值得。如果你能开发一个工具或者制定一套工作流程能快速完成H5活动的任务,这个才是需要挑战的。
技术是一种手段,是为了增加那些事情工作效率的,总的来说是为别人服务,脱离的服务,它的存在也就没有价值了不是吗。


原文来自:https://segmentfault.com/a/1190000018988242


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3059

关闭

h5页面的viewpoint

只要写手机端的h5页面,viewpoint是绕不过的坎,不处理好这个东西,h5页面就无法正常显示。那它到底是怎么回事呢?网上曾看到一个据说很有名的外国人,写过一篇\\\"三个viewpoint\\\"的概念,但是看了,觉得似懂非懂,后来做了不少h5页面

h5中新属性 data-属性名的获取与设置,详解原生js操作h5的属性data-*

h5中新功能用来描述自定义的数据属性,也就是 data-* 自定义属性。在h5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放 ,在实际项目中使用比较多。这篇文章就总结如何通过原生js对data-*属性的操作。

Android H5秒开方案调研—今日头条H5秒开方案详解

文件下载耗时:包括html、css、js、图片等;页面渲染耗时:页面渲染,解析js、css文件等;WebView创建耗时:首次创建WebView耗时大约需要500ms左右,第二次创建耗时大约需要20ms左右

H5/web混合开发,js获取android,ios原生应用返回数据的实例方法

在很多应用都采用同H5页面混合开发模式,这篇主要讲解JS中如何获取原生应用返回给js的数据方法,包括android和ios

h5开发在ios浏览器遇到的坑

click事件;在ios上,最后一个元素加margin-bottom无效;时间转化问题;position: fixed中的input框聚焦软键盘弹出,IOS下会有光标错位问题;滚动穿透问题

H5嵌入APP后,通过window.WebViewJavascriptBridge原生APP与H5之间交互

原生APP跳转到H5页面时,往往需要携带一些用户信息,之前做法是在跳转的地址中拼接H5页面需要的参数,现在通过window.WebViewJavascriptBridge悄悄的进行数据交互

H5页面中唤起APP的方法

需要在从APP分享出去的H5页面中,带有一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载。这是一个很正常的推广和导流量的策略。

h5实现名片扫描识功能

点击名片识别按钮,将名片上的个人信息扫描并解析出来显示。需要调出手机摄像头和相册,让用户进行选择;获取照片或者图片的base64数据;调取第三方的orc接口进行图片解析,得到名片上的个人信息,并显示。

H5与企业微信jssdk集成

注册企业微信,在应用与小程序栏目中,设置可信域名,配置公众号菜单。可信域名不得不说下,在最初开发时,认为设置并验证后,微信认证接口会实现跨域请求,其实并没有。所以全在H5端还得配合服务端完成票据获取等操作。

H5唤醒App之scheme方案

在写移动端页面会遇到唤醒App的需求, 一般都是通过scheme协议唤起的,这里记录一下,以新浪微博为例: 其协议为 sinaweibo://splash; 这些协议需要自己去收集

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!