最新博文

• HbuilderX运行npm

  uni-app

  HbuilderX运行npm需要配置。

  在 工具 ->设置->运行配置中，设置node运行设置

  
  

  
  

  这里一定注意的是：HbuilderX内置了node/npm插件，但这里的node运行配置npm路径和node路径一定不能使用插件的路径。

  要想在HbuilderX中使用npm，要自行安装node

  node下载地址：https://nodejs.org/en/download/

  
  

  
  

  
  

  风口下的猪2020-08-31【uni-app】

  阅读更多

• uni-app规范开发（11）加载数据后渲染

  uni-app

  在vue项目中，尽量不用mounted渲染后进行dom操作，因为实际项目中mounted往往比数据异步早一点。

  所以项目中包含dom操作的页面，规范的数据加载及页面渲染是：

  1.用async/await更改onload，是数据加载在onload中同步进行；

  2.onload中数据加载完后使用this.$nextTick()，在渲染后执行dom操作

  例如：

  async onLoad() {
  	await this.$api('prosCate').then((res)=>{
  		this.left=res.data.msg
  	});
  	await this.$api('pros').then((res)=>{
  		this.right=res.data.msg
  	});
  	this.$nextTick(() => {
  		this._initScroll()
  		this._getHeight()
  	})
  },

  
  

  
  

  
  

  风口下的猪2020-08-30【uni-app】

  阅读更多

• bscroll左右联动

  uni-app

  移动端很常见的效果，当滑动右边部分的时候，左边会联动显示与当前内容相符合的标题高亮，当点击左边某一个标题的时候，右边会自动滑动到相应的内容。

  项目如下图：

  

  实现及说明

  1.滚动效果

  better-scroll在使用的时候需要在dom元素渲染完成之后初始化better-scroll的实例，初始化的时候，先要获取需要滑动的元素，然后在初始化的时候将获取到的元素传递给初始化函数，此时便可实现滑动效果

  2.左右联动效果

  左右联动效果的实现，是better-scroll通过监听事件实现的。

  首先获取到右边内容盒子的高度，然后获取到该盒子中每一项的高度并做前n项高度累加（第n项的高度是前n项的高度和）存储到listHeight数组中。在初始化的时候传递属性probeType=3 （探针的效果，时时获取滚动高度），并给右边的内容盒子对象监听scroll事件，从而时时获取Y轴位置，来与listHeight数组中的数据做比较，时时计算当前的索引值，并给对边对应索引值的项添加背景色高亮，从而实现右边滑动，联动左边。

  当点击左边的每一项的时候，获取到当前的索引值，并根据当前的索引值获取到与右边内容盒子中对应索引的元素，右边的盒子元素通过监听scrollToElement，并传递获取到的对应索引元素和动画时间，从而实现点击左边，实现右边联动；

  实现代码如下：

  <div class="content">
      <div class="left" ref="left">
  	<ul>
  	     <li v-for="(item, index) in left" :key="item" :class="{current: currentIndex == index}" @click="selectItem(index, $event)">
  		  <span class="left-item">{{item}}</span>
  	     </li>
  	</ul>
      </div>
      <div class="right" ref="right">
  	<ul>
  	     <li class="right-item right-item-hook" v-for="item in right" :key="item.name">
  		  <h2>{{item.name}}</h2>
  		  <ul>
  		        <li v-for="num in item.content" :key="num.name">
  			      <div>{{item.name+num}}</div>
  			</li>
  		  </ul>
  	     </li>
  	</ul>
       </div>
   </div>
  

  
  

  <script>
  import BScroll from "../../../lib/utils/bscroll.js"
  export default {
  	data () {
  	    return {
  	        left: ['a', 'b', 'c'],
  	        right: [
  				{
  				    name: 'a',
  				    content: ['1', '2', '3', '4', '5']
  				},
  				{
  				    name: 'b',
  				    content: ['1', '2', '3', '4', '5']
  				},
  				{
  				    name: 'c',
  				    content: ['1', '2', '3', '4', '5']
  				},
  	        ],
  	        listHeight: [],
  	        scrollY: 0, //实时获取当前y轴的高度
  			currentIndex:0,
  	    }
  	},
  	methods: {
  	    _initScroll () {
  			var that=this;
  	        this.lefts = new BScroll(this.$refs.left, {
  	            click: true
  	        })
  	        this.rights = new BScroll(this.$refs.right, {
  	            probeType: 3 
  	        })
  	        this.rights.on('scroll', (pos) => {
  	            this.scrollY = Math.abs(Math.round(pos.y));
  				that.getCurIndex();
  	            })
  	        },
  	    _getHeight () {
  	        let rightItems = this.$refs.right.getElementsByClassName('right-item-hook')
  	        let height = 0
  	        this.listHeight.push(height)
  	        for(let i = 0; i < rightItems.length; i++){
  	            height += rightItems[i].clientHeight
  	            this.listHeight.push(height)
  	        }
  	    },
  	    selectItem(index,event){
  			let rightItems = this.$refs.right.getElementsByClassName('right-item-hook');
  			let el = rightItems[index];
  			this.rights.scrollToElement(el, 300);
  	    },
  		getCurIndex () {
  		    for(let i = 0; i < this.listHeight.length; i ++){
  				let lastScroll=this.listHeight[this.listHeight.length - 1]-this.$refs.right.clientHeight;
  				if(lastScroll-20<=this.scrollY){
  					this.currentIndex=this.listHeight.length - 2;
  					return;
  				}
  		        let height = this.listHeight[i]
  		        let height2 = this.listHeight[i + 1]
  		        if(!height2 || (this.scrollY >= height && this.scrollY < height2)){
  		            this.currentIndex=i;
  					return;
  		        }      
  		    }
  		}
  	},
  	mounted () {
  	    this.$nextTick(() => {
  	        this._initScroll()
  	        this._getHeight()
  	    })
  	},
  }
  </script>

  
  

  参照原文：https://blog.csdn.net/mm_hello11/article/details/89048147

  文章中效果滑动到底部不能显示正常，因为computed里dom操作，在挂载时执行，此时还没渲染完成。

  对该文章的js部分进行了修改

  
  

  
  

  
  

  
  

  风口下的猪2020-08-29【uni-app】

  阅读更多

• import ... from和import {} from 的区别

  vue

  
  

  

  1. import { isvalidUsername ，validateUrl} from '@/utils/validate'    //也可以分开两次写，导入的时候都带花括号

  

  
   

  2.  import  isvalidUsername  from '@/utils/validate'    //导入的时候没有花括号

   

  

  

  ES6中export及export default的区别

  在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default仅有一个。 

  1.export与export default均可用于导出常量、函数、文件、模块等

  2.在一个文件或模块中，export  、import可以有多个，export default仅有一个

  3.通过export方式导出，在导入时要加{ }，export default则不需要

  4.export能直接导出变量表达式，export default不行

  
  

  
  

  文章链接：https://blog.csdn.net/qq_36657291/article/details/81327423

  风口下的猪2020-08-26【vue】

  阅读更多

• vue挂载全局方法和组件(uni-app中)

  uni-app

  1.挂载方法：

  在main.js中通过vue将方法进行挂载

  Vue.prototype.showError = function(mes) {}

  showError便是全局的方法，直接this.showError()便可以调用到该方法

  2.挂载组件

  先引入该组件 import svgPic from './components/svgPic.vue'

  再写上  Vue.component('svg-pic',svgPic)

  便可以在全局使用<svg-pic></svg-pic>的标签了。

  
  

  
  

  
  

  
  

  风口下的猪2020-08-26【uni-app】

  阅读更多

• uni-app规范开发（10）Vue 单文件组件 (SFC) 规范

  uni-app

  .vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块：

  <template>
    <div class="example">{{ msg }}</div>
  </template>
  
  <script>
  export default {
    data () {
      return {
        msg: 'Hello world!'
      }
    }
  }
  </script>
  
  <style>
  .example {
    color: red;
  }
  </style>
  
  <custom1>
    This could be e.g. documentation for the component.
  </custom1>
  

  vue-loader 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。

  vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，你可以像下面这样使用 Sass 语法编写样式：

  <style lang="sass">
    /* write Sass! */
  </style>
  

  更多细节可以在使用预处理器中找到。

  #语言块

  #模板

  • 每个 .vue 文件最多包含一个 <template> 块。

  • 内容将被提取并传递给 vue-template-compiler 为字符串，预处理为 JavaScript 渲染函数，并最终注入到从 <script> 导出的组件中。

  #脚本

  • 每个 .vue 文件最多包含一个 <script> 块。

  • 这个脚本会作为一个 ES Module 来执行。

  • 它的默认导出应该是一个 Vue.js 的组件选项对象。也可以导出由 Vue.extend() 创建的扩展对象，但是普通对象是更好的选择。

  • 任何匹配 .js 文件 (或通过它的 lang 特性指定的扩展名) 的 webpack 规则都将会运用到这个 <script> 块的内容中。

  #样式

  • 默认匹配：/\.css$/。

  • 一个 .vue 文件可以包含多个 <style> 标签。

  • <style> 标签可以有 scoped 或者 module 属性 (查看 scoped CSS和 CSS Modules) 以帮助你将样式封装到当前组件。具有不同封装模式的多个 <style> 标签可以在同一个组件中混合使用。

  • 任何匹配 .css 文件 (或通过它的 lang 特性指定的扩展名) 的 webpack 规则都将会运用到这个 <style> 块的内容中。

  #自定义块

  可以在 .vue 文件中添加额外的自定义块来实现项目的特定需求，例如 <docs> 块。vue-loader 将会使用标签名来查找对应的 webpack loader 来应用在对应的块上。webpack loader 需要在 vue-loader 的选项 loaders 中指定。

  更多细节，查看自定义块。

  #Src 导入

  如果喜欢把 .vue 文件分隔到多个文件中，你可以通过 src 属性导入外部文件：

  <template src="./template.html"></template>
  <style src="./style.css"></style>
  <script src="./script.js"></script>
  

  需要注意的是 src 导入遵循和 webpack 模块请求相同的路径解析规则，这意味着：

  • 相对路径需要以 ./ 开始
  • 你可以从 NPM 依赖中导入资源：

  <!-- import a file from the installed "todomvc-app-css" npm package -->
  <style src="todomvc-app-css/index.css">
  

  在自定义块上同样支持 src 导入，例如：

  <unit-test src="./unit-test.js">
  </unit-test>
  

  #语法高亮 / IDE 支持

  目前有下列 IDE/编辑器 支持语法高亮：

  • Sublime Text
  • VS Code
  • Atom
  • Vim
  • Emacs
  • Brackets
  • JetBrains IDEs (WebStorm、PhpStorm 等)

  非常感谢其他编辑器/IDE 所做的贡献！如果在 Vue 组件中没有使用任何预处理器，你可以把 .vue 文件当作 HTML 对待。

  #注释

  在语言块中使用该语言块对应的注释语法 (HTML、CSS、JavaScript、Jade 等)。顶层注释使用 HTML 注释语法：<!-- comment contents here -->。

  
  

  
  

  
  

  
  

  风口下的猪2020-08-26【uni-app】

  阅读更多

• BOM (byte order mark)

  PHP

  BOM（Byte Order Mark），字节顺序标记，出现在文本文件头部，Unicode编码标准中用于标识文件是采用哪种格式的编码。
  

  在UCS 编码中有一个叫做 "Zero Width No-Break Space" ，中文译名作“零宽无间断间隔”的字符，它的编码是 FEFF。而 FFFE 在 UCS 中是不存在的字符，所以不应该出现在实际传输中。UCS 规范建议我们在传输字节流前，先传输字符 "Zero Width No-Break Space"。这样如果接收者收到 FEFF，就表明这个字节流是 Big-Endian 的；如果收到FFFE，就表明这个字节流是 Little- Endian 的。因此字符 "Zero Width No-Break Space" （“零宽无间断间隔”）又被称作 BOM。

  UTF-8 不需要 BOM 来表明字节顺序，但可以用 BOM 来表明编码方式。字符 "Zero Width No-Break Space" 的 UTF-8 编码是 EF BB BF。所以如果接收者收到以 EF BB BF 开头的字节流，就知道这是 UTF-8编码了。Windows 就是使用 BOM 来标记文本文件的编码方式的。

  字符U+FEFF如果出现在字节流的开头，则用来标识该字节流的字节序，是高位在前还是低位在前。如果它出现在字节流的中间，则表达零宽度非换行空格的意义，用户看起来就是一个空格。从Unicode3.2开始，U+FEFF只能出现在字节流的开头，只能用于标识字节序，就如它的名称——字节序标记——所表示的一样；除此以外的用法已被舍弃。取而代之的是，使用U+2060来表达零宽度无断空白。

  类似WINDOWS自带的记事本等软件，在保存一个以UTF-8编码的文件时，会在文件开始的地方插入三个不可见的字符（0xEF 0xBB 0xBF，即BOM）。它是一串隐藏的字符，用于让记事本等编辑器识别这个文件是否以UTF-8编码。对于一般的文件，这样并不会产生什么麻烦。但对于 PHP来说，BOM是个大麻烦。

  PHP并不会忽略BOM，所以在读取、包含或者引用这些文件时，会把BOM作为该文件开头正文的一部分。根据嵌入式语言的特点，这串字符将被直接执行（显示）出来。由此造成即使页面的 top padding 设置为0，也无法让整个网页紧贴浏览器顶部，因为在html一开头有这3个字符呢！

  不同编码的字节顺序标记的表示

  编辑

  编码	表示 (十六进制)	表示 (十进制)
  UTF-8	EF BB BF	239 187 191
  UTF-16（大端序）	FE FF	254 255
  UTF-16（小端序）	FF FE	255 254
  UTF-32（大端序）	00 00 FE FF	0 0 254 255
  UTF-32（小端序）	FF FE 00 00	255 254 0 0
  UTF-7	2B 2F 76和以下的一个字节：[ 38 | 39 | 2B | 2F ]	43 47 118和以下的一个字节：[ 56 | 57 | 43 | 47 ]
  en:UTF-1	F7 64 4C	247 100 76
  en:UTF-EBCDIC	DD 73 66 73	221 115 102 115
  en:Standard Compression Scheme for Unicode	0E FE FF	14 254 255
  en:BOCU-1	FB EE 28及可能跟随着FF	251 238 40及可能跟随着255
  GB-18030	84 31 95 33	132 49 149 51

  utf-8编码总bom在文件头部.占用三个字符.很多都能识别但是php不能识别bom头

  这也是用记事本编辑utf-8编码后执行就会出错的原因了(用xftp直接修改导致错误)

  在服务器根目录下建一个clean.bom文件.浏览器运行一下就可以了.

  一般会出现json.parse报错.错误信息.

  <?php 
  if (isset($_GET['dir'])) { //设置文件目录  
      $basedir = $_GET['dir']; 
  } else { 
      $basedir = '.'; 
  } 
   
  $auto = 1; 
  checkdir($basedir); 
   
  function checkdir($basedir) 
  { 
      if ($dh = opendir($basedir)) { 
          while (($file = readdir($dh)) !== false) { 
              if ($file != '.' && $file != '..') { 
                  if (!is_dir($basedir . "/" . $file)) { 
                      echo "filename: $basedir/$file " . checkBOM("$basedir/$file") . " <br>"; 
                  } else { 
                      $dirname = $basedir . "/" . $file; 
                      checkdir($dirname); 
                  } 
              } 
          } 
          closedir($dh); 
      } 
  } 
  function checkBOM($filename) 
  { 
      global $auto; 
      $contents   = file_get_contents($filename); 
      $charset[1] = substr($contents, 0, 1); 
      $charset[2] = substr($contents, 1, 1); 
      $charset[3] = substr($contents, 2, 1); 
      if (ord($charset[1]) == 239 && ord($charset[2]) == 187 && ord($charset[3]) == 191) { 
          if ($auto == 1) { 
              $rest = substr($contents, 3); 
              rewrite($filename, $rest); 
              return ("<font color='red'>BOM found, automatically removed.</font>"); 
          } else { 
              return ("<font color='red'>BOM found.</font>"); 
          } 
      } else
          return ("BOM Not Found."); 
  } 
   
  function rewrite($filename, $data) 
  { 
      $filenum = fopen($filename, "w"); 
      flock($filenum, LOCK_EX); 
      fwrite($filenum, $data); 
      fclose($filenum); 
  } 
  ?>

  
  

  
  

  
  

  
  

  风口下的猪2020-08-26【PHP】

  阅读更多

• uni-app规范开发（9）使用公共组件利用slot

  uni-app

  vue中使用相当于tp5/bootstrap/smarty的公共模板，是通过公共组件+slot实现的。

  slot的使用，见链接

  https://blog.csdn.net/LzzMandy/article/details/105864225
  

  
  

  风口下的猪2020-08-26【uni-app】

  阅读更多

• uniapp规范开发（8）使用过滤器filter

  uni-app
  平时我们在vue中使用过滤器时，在组件中定义的过滤器不能在其他组件中使用，所以要在每个组件中定义自己的filter，这样就会出现很多重复的代码，那有没有办法定义一个公用的filter，减少代码的重复呢？下面就给大家展示下使用最多且有效的方法。
  1.首先在公用js中定义一个通用的filter.js

  const Filters = {
      stockCode(code){
          if(code){
              return code.substr(1,code.length-1);
          } else {
              return code;
          }
      }
  }
  export default Filters;

  2.然后在main.js中引入
  

  //引入过滤函数
  import vueFilter from './sys/filters';
  
  for (let key in vueFilter){
    Vue.filter(key,vueFilter[key])
  }

  3.这样我们就可以在组件中使用啦
  

  <el-col :span="3"><div>{{item[0]|stockCode}}</div></el-col>

  
  

  
  

  风口下的猪2020-08-28【uni-app】

  阅读更多

• uniapp规范开发（7）指令规范

  uni-app

  指令规范

  1. 指令有缩写一律采用缩写形式

    // bad
    v-bind:class="{'show-left'：true}"
    v-on:click="getListData"
   
    // good
    :class="{'show-left'：true}"
    @click="getListData"
  

  2. v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一

   <!-- good -->
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
   
    <!-- bad -->
    <ul>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ul>
  

  3. 避免 v-if 和 v-for 同时用在一个元素上（性能问题）

  以下为两种解决方案：

  将数据替换为一个计算属性，让其返回过滤后的列表

  
    <!-- bad -->
    <ul>
      <li v-for="user in users" v-if="user.isActive" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
   
    <!-- good -->
    <ul>
      <li v-for="user in activeUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
   
    <script>
    computed: {
      activeUsers: function () {
        return this.users.filter(function (user) {
          return user.isActive
        })
      }
    }
    </script>
  

  将 v-if 移动至容器元素上 (比如 ul, ol)

  <!-- bad -->
    <ul>
      <li v-for="user in users" v-if="shouldShowUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
   
    <!-- good -->
    <ul v-if="shouldShowUsers">
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  

  Props 规范

  
  // bad 这样做只有开发原型系统时可以接受
  {
      props: ['status']
  }
  
  // good
   {
  
      props: {
        status: {
          type: String,
          required: true,
          validator: function (value) {
            return [
              'syncing',
              'synced',
              'version-conflict',
              'error'
            ].indexOf(value) !== -1
          }
        }
      }
  }
  

  其他

  1. 避免 this.$parent

  2. 调试信息 console.log() debugger 使用完及时删除

  3. 除了三目运算，if,else 等禁止简写

    // bad
    if (true)
        alert(name);
    console.log(name);
   
    // bad
    if (true)
    alert(name);
    console.log(name)
   
    // good
    if (true) {
        alert(name);
    }
    console.log(name);
  
  

  
  

  
  

  风口下的猪2020-08-25【uni-app】

  阅读更多

• uniapp规范开发（6）编码规范

  uni-app

  编码规范

  优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照 ESLint 格式要求编写代码

  源码风格

  使用 ES6 风格编码

  1. 定义变量使用 let ,定义常量使用 const

  2. 静态字符串一律使用单引号或反引号，动态字符串使用反引号

    // bad
    const a = 'foobar'
    const b = 'foo' + a + 'bar'
   
    // acceptable
    const c = `foobar`
   
    // good
    const a = 'foobar'
    const b = `foo${a}bar`
    const c = 'foobar'
  

  解构赋值

  • 数组成员对变量赋值时，优先使用解构赋值

    // 数组解构赋值
    const arr = [1, 2, 3, 4]
    // bad
    const first = arr[0]
    const second = arr[1]
   
    // good
    const [first, second] = arr
  

  • 函数的参数如果是对象的成员，优先使用解构赋值

   // 对象解构赋值
    // bad
    function getFullName(user) {
      const firstName = user.firstName
      const lastName = user.lastName
    }
   
    // good
    function getFullName(obj) {
      const { firstName, lastName } = obj
    }
   
    // best
    function getFullName({ firstName, lastName }) {}
  

  • 拷贝数组,使用扩展运算符（...）拷贝数组。

   const items = [1, 2, 3, 4, 5]
   
    // bad
    const itemsCopy = items
   
    // good
    const itemsCopy = [...items]
  

  • 箭头函数(需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this)

    // bad
    const self = this;
    const boundMethod = function(...params) {
      return method.apply(self, params);
    }
   
    // acceptable
    const boundMethod = method.bind(this);
   
    // best
    const boundMethod = (...params) => method.apply(this, params);
  

  • 模块(如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 不要同时使用)

   // bad
    import * as myObject from './importModule'
   
    // good
    import myObject from './importModule'
  

  • 如果模块默认输出一个函数，函数名的首字母应该小写。

    function makeStyleGuide() {
    }
   
    export default makeStyleGuide;
  

  • 如果模块默认输出一个对象，对象名的首字母应该大写。

    const StyleGuide = {
      es6: {
      }
    };
   
    export default StyleGuide;

  
  

  
  

  
  

  风口下的猪2020-08-25【uni-app】

  阅读更多