panteng / wechat-h5-boilerplate Goto Github PK
View Code? Open in Web Editor NEW为腾讯微信优化的H5动效模板,帮助你快速构建全屏滚动型H5页面。
为腾讯微信优化的H5动效模板,帮助你快速构建全屏滚动型H5页面。
在 animation-control.js中,这么一行代码,
在clearAnimation方法中,又使用到了,
clearAnimation: function () {
$('.animated').each(function () {
$(this).css({ 'visibility': 'hidden' });
});
}
这2行代码,我觉得删了也没有什么影响,请问他们的意思是什么,还望见谅
初始化的BGM图标是播放状态的音乐图标。但是实际上是没有播放的。可以改成默认播放,或者默认不播放吧。
gulp dev 时报错:ReferenceError: Promise is not defined
CentOS 6.7
[email protected]
everybody,想问个问题。H5中px等高问题:比如iphone6和iphone6plus,dpr分别为2和3,ppi分别为326和401 .假设我html直接写死style='height:100px',px无任何后处理,看效果2手机上高度为等高。但实际计算尺寸过程不是100乘以2/326(英寸)、100乘以3/401(英寸),明显不等,为何视图出来的是等高?研究发现似乎与设置ideal viewport有关,如果去掉ideal viewport,则不等高了。有没有大神能打通我的任督2脉
比如bounce之后接个flash
[15:53:11] Working directory changed to E:\node\wechat-h5-boilerplate
[15:53:13] Using gulpfile E:\node\wechat-h5-boilerplate\gulpfile.js
[15:53:13] Starting 'dev'...
[15:53:13] Starting 'clean-files'...
[15:53:13] Finished 'clean-files' after 11 ms
[15:53:13] Starting 'publish-fonts'...
[15:53:13] Starting 'publish-images'...
[15:53:13] Starting 'publish-audios'...
[15:53:13] Starting 'publish-css'...
[15:53:13] Starting 'publish-js'...
[15:53:13] Finished 'publish-audios' after 413 ms
events.js:160
throw er; // Unhandled 'error' event
^
Error: The system cannot find the path specified.
at notFoundError (E:\node\wechat-h5-boilerplate\node_modules\cross-spawn\lib\enoent.js:11:11)
at verifyENOENT (E:\node\wechat-h5-boilerplate\node_modules\cross-spawn\lib\enoent.js:46:16)
at ChildProcess.cp.emit (E:\node\wechat-h5-boilerplate\node_modules\cross-spawn\lib\enoent.js:33:19)
at Process.ChildProcess._handle.onexit (internal/child_process.js:204:12)
when run
$ gulp dev
Error: spawn /home/streverf/www/fancy/node_modules/optipng-bin/vendor/optipng ENOENT
at exports._errnoException (util.js:870:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at nextTickCallbackWith2Args (node.js:441:9)
at process._tickCallback (node.js:355:17)
env:
$ npm -version
3.5.2
$ nodejs --version
v4.2.6
设置autoplay了
....
autoplay: {
delay: 3000,
stopOnLastSlide: true,
disableOnInteraction: false
},
....
但是autoplay的delay貌似不起作用,会不停的翻页
当我 git clone 此项目后,安装依赖,执行 gulp prod
,得到输出:
[18:18:28] Using gulpfile ~/Projects/wechat-h5-boilerplate/gulpfile.js
[18:18:28] Starting 'prod'...
[18:18:28] Starting 'minify-css'...
[18:18:28] Starting 'uglify-js'...
[18:18:28] Finished 'minify-css' after 11 ms
[18:18:28] Finished 'uglify-js' after 5.94 ms
[18:18:28] Starting 'inject-min'...
[18:18:28] Starting 'del-bundle'...
[18:18:28] Finished 'del-bundle' after 5 ms
[18:18:28] gulp-inject Nothing to inject into index.html.
[18:18:28] Finished 'inject-min' after 16 ms
[18:18:28] Finished 'prod' after 30 ms
而 app/dist 只有一个 index.html 文件,在此期间我并没有修改任意一行代码。
ps: prod dev 是正常的
我安装了jquey, 为什么调用不到啊
events.js:160 throw er; // Unhandled 'error' event ^ GulpUglifyError: unable to minify JavaScript at createError (H:\h50121\node_modules\.2.1.2@gulp-uglify\lib\create-error.js:6:14) at wrapper (H:\h50121\node_modules\.4.17.4@lodash\_createHybrid.js:87:15) at trycatch (H:\h50121\node_modules\.2.1.2@gulp-uglify\minifier.js:26:12) at DestroyableTransform.minify [as _transform] (H:\h50121\node_modules\.2.1.2@gulp-uglify\minifier.js:79:19) at DestroyableTransform.Transform._read (H:\h50121\node_modules\.2.3.3@readable-stream\lib\_stream_transform.js:182:10) at DestroyableTransform.Transform._write (H:\h50121\node_modules\.2.3.3@readable-stream\lib\_stream_transform.js:170:83) at doWrite (H:\h50121\node_modules\.2.3.3@readable-stream\lib\_stream_writable.js:406:64) at writeOrBuffer (H:\h50121\node_modules\.2.3.3@readable-stream\lib\_stream_writable.js:395:5) at DestroyableTransform.Writable.write (H:\h50121\node_modules\.2.3.3@readable-stream\lib\_stream_writable.js:322:11) at write (H:\h50121\node_modules\.1.0.34@readable-stream\lib\_stream_readable.js:623:24)
建议增加一下全屏背景图片的案例
开发手机
很多时候全屏背景图片缩放问题很严重
建议可以做一个放在demo里面
默认的3000端口在哪里修改?
如题, gulp能部署成功, 但是没有出现external URL. 我想在手机端调试一下. 谢谢.
滚到最后一页,再往下不能到滚回第一页么?
(虽然易企秀什么的挺low的...)
添加第三方库(重力感应:https://github.com/shrekshrek/orienter)会出错:
require('./orienter/orienter.js')
var o = new Orienter();
o.init();
出错,提示:Uncaught ReferenceError: Orienter is not defined。
请问是什么原因造成的?
我用的是vue-cli,怎么在vue的template中生成动画?
造成翻到最后一个slide时,up-arrow仍然还在。
PS:我自己还给加了个down-arrow,除第一页外才显示。
如果是750px的设计稿,有个元素大小为375px宽,用rem标记大小,该写多大rem,(因为rem随屏幕变化)
RT,在添加了vue之后,页面不能滑动翻页,绑定的是swiper-wrapper这个元素
<div class="swiper-wrapper">
<div class="swiper-slide slide-1">
fs.js:761
return binding.readdir(pathModule._makeLong(path));
^
Error: ENOENT, no such file or directory '/Users/renxianglei/IdeaProjects/summer_h5/node_modules/gulp-sass/node_modules/node-sass/vendor'
at Error (native)
at Object.fs.readdirSync (fs.js:761:18)
at Object.getInstalledBinaries (/Users/renxianglei/IdeaProjects/summer_h5/node_modules/gulp-sass/node_modules/node-sass/lib/extensions.js:119:13)
at foundBinariesList (/Users/renxianglei/IdeaProjects/summer_h5/node_modules/gulp-sass/node_modules/node-sass/lib/errors.js:20:15)
at foundBinaries (/Users/renxianglei/IdeaProjects/summer_h5/node_modules/gulp-sass/node_modules/node-sass/lib/errors.js:15:5)
at Object.module.exports.missingBinary (/Users/renxianglei/IdeaProjects/summer_h5/node_modules/gulp-sass/node_modules/node-sass/lib/errors.js:45:5)
at Object. (/Users/renxianglei/IdeaProjects/summer_h5/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:15:28)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
node版本是0.12.2,之前用windows没问题,现在换了mac报错了,不知道为什么,两个电脑node版本是一样的,研究很久也不知道怎么回事,求助,谢谢
如题
怎么压缩后的包比未压缩更大?那压缩岂不是没用,而且还让包更大了
我看到项目里面没有加swiper的图片lazyload功能,请问是否在后面的版本中添加这一块功能?
1.如果该插件没有npm包,但是支持commonjs规范,是不是可以直接放到src/js/文件夹下 用require方式引入
2.如果连commonjs都不支持 是不是就不能使用
2385 warn optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
2386 warn notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
2387 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Valid OS: darwin
2387 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Valid Arch: any
2387 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Actual OS: win32
2387 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Actual Arch: x64
2388 verbose stack Error: [email protected] install: node scripts/install.js
2388 verbose stack spawn bash ENOENT
2388 verbose stack at _errnoException (util.js:1022:11)
2388 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
2388 verbose stack at onErrorNT (internal/child_process.js:372:16)
2388 verbose stack at _combinedTickCallback (internal/process/next_tick.js:138:11)
2388 verbose stack at process._tickCallback (internal/process/next_tick.js:180:9)
2389 verbose pkgid [email protected]
2390 verbose cwd E:\node\wechat-h5-boilerplate
2391 verbose Windows_NT 10.0.16299
2392 verbose argv "E:\node\node.exe" "E:\node\node_modules\npm\bin\npm-cli.js" "install"
2393 verbose node v8.10.0
2394 verbose npm v5.7.1
2395 error file bash
2396 error path bash
2397 error code ELIFECYCLE
2398 error errno ENOENT
2399 error syscall spawn bash
2400 error [email protected] install: node scripts/install.js
2400 error spawn bash ENOENT
2401 error Failed at the [email protected] install script.
2401 error This is probably not a problem with npm. There is likely additional logging output above.
2402 verbose exit [ 1, true ]
我在任务里面加了一段 ES6 转码的,打包之后生产环境提示没有 JQuery 怎么解?
原因是gulp3.9.0在node12.xx和存在兼容问题,, 解决方法参考overflow上的问题https://stackoverflow.com/questions/55921442/how-to-fix-referenceerror-primordials-is-not-defined-in-node/58394828#58394828;
本人通过nvm给node降级处到11.13.0得以解决
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.