标签目录：前端

以下是与标签 “前端” 相关联的文章

React学习6-配置react和webpack

| 前端 | | 暂无评论 | 11291 views

react和webpacklian联合开发过程中涉及到一些配置的更改 1、热更新的开启

1
2
3
4
5
6
7
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
}
//给webpack-dev-server重新命名，就可以运行 npm start 来开启热更新

  2、webpack性能设置

1
2
3
4
5
6
7
8
9
10
var webpack = require('webpack');
var path = require('path');
module.exports = {
    //性能
    performance:{
        hints:'warning', //级别：超出文件大小限制给出什么级别的提示
        maxEntrypointSize:100000, //限制最后生成的bundle.js的大小，单位bytes
        maxAssetSize:450000, //对图片和文件的限制，大小bytes
    },
}

  3、source-map 打包后的文件被压缩过，使用source……

移动营销设计

| 前端,闲谈 | | 暂无评论 | 1760 views

这算是一篇读书笔记，最近看了一本关于h5的移动营销设计的书。 其实这本书还是比较适合跟技术经常做交接但是并不写代码的人，大致是那些市场、运营、设计岗位的人吧。里面很少涉及到代码层面的东西，多半是关于营销的，比如如何设计一个页面能达到传宣效果，或者说应该采用怎样的设计风格等等。 这里就不多说太多，主要记录开发同学在开发过程中可能会用到的点，……

React学习5-开发笔记

| 前端 | | 暂无评论 | 1139 views

记录学习过程中的方法或者问题 1、要在render中展示一个html内容 比如里面的空格，可以进行Unicode转码后再放到render中，但是这种方法还需要提供额外的接口处理内容，不方便。

1
2
var username='XXXXXXX'; //html内容
<p dangerouslySetInnerHTML={{__html: username}}></p>

这种方法其实“dangerous”，因为在JSX中安全。   2、当一个……

React学习4－开发设置

| 前端 | | 暂无评论 | 1258 views

项目可以进行开发了，但是开发过程中，我们可以设置更多的东西来帮助我们开发更方便快捷。 1、及时打包

1
webpack --watch

每次修改js文件，都要运行webpack打包，因为html中引用的是这个打包后的文件，所以很不方便，执行这个命令后，在js中做任何修改保存后都会自动打包 2、实时刷新浏览器 ……

React学习3－使用npm管理项目

| 前端 | | 暂无评论 | 1004 views

之前在官网看到使用script进行引用的方式进行react的开发，包括在一些简单项目中，我也是引用过来后进行开发的，前期简单的使用是为了了解react的思想，在进入大的项目之前首先需要配置一个更完整的项目环境。 npm是现在比较常用的包管理工具 1、项目配置初始化

1
npm init

进入一系……

chrome插件开发

| 鲜货 | | 暂无评论 | 1335 views

这两天有一个浏览器插件的需求： 在网页上右键图片，可以把图片上传到指定的服务器！ 其实后端的开发还比较简单，拿到一个图片的路径，下载下来，调用服务器接口上传，比如上传到了七牛。 主要在于前端怎么获取。插件开发网上有教程，首先有几个文件需要：manifest.json，index.html， 配置文件：manifest.json 这个文件设……

初识微信小程序，踩坑记

| 前端 | | 暂无评论 | 1198 views

最近在做微信小程序的开发，遇到一些问题，做下记录 1、开发配置中一个重要的点，域名设置，不支持ip和端口号，并且只支持https 2、样式中的图片，只能采用远程图片地址，不能使用相对路径，但是js中当require另一个js可以使用相对路径 3、一个页面onload一次，onshow会多次，就是你切换也好，跳转也好，只要看到页面一次，就执……

console用法笔记

| 前端 | | 暂无评论 | 1762 views

平时大家都用console.log()进行bug查找，后来查看到，有好多console的用法 console.assert(expression, object[, object…]) 接收至少两个参数，第一个参数的值或返回值为false的时候，将会在控制台上输出后续参数的值。例如： [crayon-67421c8021567……

让音频在ios页面上自动播放

| 前端 | | 暂无评论 | 2105 views

在ios上的页面中，有时候需要一开始就进行播放音频，但是即便你加了autoplay，在js中写了start，但是它就是不播放。 很明显这个跟ios的系统有关，那么下面这种办法就可以搞定。

1
2
3
4
5
6
7
8
9
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
var isAutoplay = true;
var audio = document.getElementById('musicid');
// 音乐播放
function autoPlayMusic() {
    // 自动播放音乐效果，解决浏览器或者APP自动播放问题
    function musicInBrowserHandler() {
        if(!isAutoplay){return false;}
        musicPlay(true);
        document.body.removeEventListener('touchstart', musicInBrowserHandler);
    }
    document.body.addEventListener('touchstart', musicInBrowserHandler);
 
    // 自动播放音乐效果，解决微信自动播放问题
    function musicInWeixinHandler() {
        musicPlay(true);
        document.addEventListener("WeixinJSBridgeReady", function () {
            musicPlay(true);
        }, false);
        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
    document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
 
    if (isPlay &amp;&amp; audio.paused) {
        audio.play();
    }
    if (!isPlay &amp;&amp; !audio.paused) {
        audio.pause();
    }
}
if (os=='ios'){
    autoPlayMusic();
}

当然，以上其实也是有个问题的， 如果进入页面，你想过一会儿再进行播放，你可能想在mus……

ios上页面禁止滚动

| 前端 | | 暂无评论 | 1785 views

ios上的页面只用一行没办法解决

1
document.documentElement.style.overflow='hidden';

所以需要额外添加其他的，把touchmove禁止掉

1
2
3
$("body").on("touchmove",function(event){
    event.preventDefault;
}, false);

当然了，可能需要另一个操作让页面重新开始滚动

1
2
3
4
$('.share-close').on('click',function () {
    $('.cover-index').fadeOut();
    $("body").off("touchmove");
})

&nbsp……