最新博文

• uniapp规范开发（5）注释规范

  uni-app

  注释规范

  代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明

  务必添加注释列表

  1. 公共组件使用说明

  2. 各组件中重要函数或者类说明

  3. 复杂的业务逻辑处理说明

  4. 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述

  5. 多重 if 判断语句

  6. 注释块必须以/**（至少两个星号）开头**/

  7. 单行注释使用//

  单行注释

  注释单独一行，不要在代码后的同一行内加注释。例如：

    // bad
   
    var name =”abc”; // 姓名    
   
    // good
   
    // 姓名
    var name = “abc”;         
  

  多行注释

  
  组件使用说明，和调用说明
        /**
        * 组件名称
        * @desc 组件描述
        * @author 组件作者
        * @date 2017年12月05日17:22:43
        * @param {Object} [title]    - 参数说明
        * @param {String} [columns] - 参数说明
        * @example 调用示例
        *  
        **/

  
  

  
  

  
  

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

  阅读更多

• uniapp规范开发（4）结构化规范

  uni-app

  目录文件夹及子文件规范

  1. 以下统一管理处均对应相应模块
  2. 以下全局文件文件均以 index.js 导出，并在 main.js 中导入
  3. 以下临时文件，在使用后，接口已经有了，发版后清除

  src                               源码目录
  |-- api                              接口，统一管理
  |-- assets                           静态资源，统一管理
  |-- components                       公用组件，全局文件
  |-- filters                          过滤器，全局工具
  |-- icons                            图标，全局资源
  |-- datas                            模拟数据，临时存放
  |-- common                           全局公共js、scss存放处
  |-- mock                             模拟接口，临时存放
  |-- router                           路由，统一管理
  |-- store                            vuex, 统一管理
  |-- views                         视图目录
  |   |-- staffWorkbench               视图模块名
  |   |-- |-- staffWorkbench.vue       模块入口页面
  |   |-- |-- view                     模块页面级组件文件夹
  |   |-- |-- components               模块通用组件文件夹
  

  多个特性的元素规范

  多个特性的元素应该分多行撰写，每个特性一行。(增强更易读)

  <!-- bad -->
  <img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
  <my-component foo="a" bar="b" baz="c"></my-component>
   
  <!-- good -->
  <img
    src="https://vuejs.org/images/logo.png"
    alt="Vue Logo"
  >
  <my-component
    foo="a"
    bar="b"
    baz="c"
  >
  </my-component>
  

  组件选项顺序

    - name
    - mixin
    - props
    - components
    - data
    - computed
    - watch
    - created
    - mounted
    - beforeDestroy
    - destroy
    - methods
    - filter

  
  

  
  

  
  

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

  阅读更多

• uniapp规范开发（3）命名规范

  uni-app

  普通变量命名规范

  • 命名方法 ：驼峰命名法

  • 命名规范 ：

    1. 命名必须是跟需求的内容相关的词，比如说我想申明一个变量，用来表示我的学校，那么我们可以这样定义const mySchool = "我的学校";
    2. 命名是复数的时候需要加s,比如说我想申明一个数组，表示很多人的名字，那么我们可以这样定义const names = new Array();

  常量

  • 命名方法 : 全部大写
  • 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。

  const MAX_COUNT = 10
  const URL = 'https://www.baidu.com/'
  

  组件命名规范

  官方文档推荐及使用遵循规则

  PascalCase (单词首字母大写命名)是最通用的声明约定

  kebab-case (短横线分隔命名) 是最通用的使用约定

  • 组件名应该始终是多个单词的，根组件 App 除外

  • 有意义的名词、简短、具有可读性

  • 命名遵循 PascalCase 约定

    • 公用组件以 Abcd (公司名缩写简称) 开头，如（AbcdDatePicker,AbcdTable）

    • 页面内部组件以组件模块名简写为开头，Item 为结尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）

  • 使用遵循 kebab-case 约定

    • 在页面中使用组件需要前后闭合，并以短线分隔，如（，）导入及注册组件时，遵循 PascalCase 约定

    • 同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。

  method 方法命名命名规范

  • 驼峰式命名，统一使用动词或者动词+名词形式

    //bad
    go、nextPage、show、open、login
   
      // good
    jumpPage、openCarInfoDialog
  

  • 请求数据方法，以 data 结尾

  //bad
    takeData、confirmData、getList、postForm
   
    // good
    getListData、postFormData
  

  • init、refresh 单词除外

  • 尽量使用常用单词开头（set、get、go、can、has、is）

  附： 函数方法常用的动词:

  
  get 获取/set 设置,
  add 增加/remove 删除
  create 创建/destory 移除
  start 启动/stop 停止
  open 打开/close 关闭,
  read 读取/write 写入
  load 载入/save 保存,
  create 创建/destroy 销毁
  begin 开始/end 结束,
  backup 备份/restore 恢复
  import 导入/export 导出,
  split 分割/merge 合并
  inject 注入/extract 提取,
  attach 附着/detach 脱离
  bind 绑定/separate 分离,
  view 查看/browse 浏览
  edit 编辑/modify 修改,
  select 选取/mark 标记
  copy 复制/paste 粘贴,
  undo 撤销/redo 重做
  insert 插入/delete 移除,
  add 加入/append 添加
  clean 清理/clear 清除,
  index 索引/sort 排序
  find 查找/search 搜索,
  increase 增加/decrease 减少
  play 播放/pause 暂停,
  launch 启动/run 运行
  compile 编译/execute 执行,
  debug 调试/trace 跟踪
  observe 观察/listen 监听,
  build 构建/publish 发布
  input 输入/output 输出,
  encode 编码/decode 解码
  encrypt 加密/decrypt 解密,
  compress 压缩/decompress 解压缩
  pack 打包/unpack 解包,
  parse 解析/emit 生成
  connect 连接/disconnect 断开,
  send 发送/receive 接收
  download 下载/upload 上传,
  refresh 刷新/synchronize 同步
  update 更新/revert 复原,
  lock 锁定/unlock 解锁
  check out 签出/check in 签入,
  submit 提交/commit 交付
  push 推/pull 拉,
  expand 展开/collapse 折叠
  begin 起始/end 结束,
  start 开始/finish 完成
  enter 进入/exit 退出,
  abort 放弃/quit 离开
  obsolete 废弃/depreciate 废旧,
  collect 收集/aggregate 聚集
  

  views 下的文件命名

  • 只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 index.vue

  • 尽量是名词,且使用驼峰命名法

  • 开头的单词就是所属模块名字（workbenchIndex、workbenchList、workbenchEdit）

  • 名字至少两个单词（good: workbenchIndex）（bad:workbench）

  props 命名

  在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case

  <!-- bad -->
  <script>
  props: {
    'greeting-text': String
  }
  </script>
   
  <welcome-message greetingText="hi"></welcome-message>
   
  <!-- good -->
  <script>
  props: {
    greetingText: String
  }
  </script>
   
  <welcome-message greeting-text="hi"></welcome-message>
  

  例外情况

  1. 作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。

  2. 循环变量可以简写，比如：i，j，k 等。

  
  

  
  

  
  

  
  

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

  阅读更多

• uniapp规范开发（2）封装请求接口

  uni-app

  普通封装

  1. 在utils目录下创建reqGeneral.js 文件（内容如下）
  

  let reqGeneral={
  	req(obj){
  		var method=obj.method||'GET';//请求方式，默认GET
  		var url=obj.url||'';//请求路径
  		var data=obj.data||{};//请求数据
  		var header=obj.header||{};//请求头
  		var success=obj.success;//成功回调函数
  		var fail=obj.fail;//失败回调函数
  		uni.request({
  			url:url,
  			method:method,
  			data:data,
  			header:header,
  			success:( (res) => {
  				if(res.statusCode==403||res.statusCode==401){
  					//错误处理
  				}else if(res.statusCode==200){
  					success(res);
  				}
  			}),
  			fail:((err)=>{
  				fail(err)
  			})
  		})
  	}
  }
  export default reqGeneral

  2.main.js中引入和挂载
  

  import reqGeneral from "./utils/reqGeneral.js"
  Vue.prototype.$reqGeneral=reqGeneral

  3.组件中使用
  

  let reqObj={
        url:"https://baidu.com",
        method:"POST",
        success:(res)=>{
               this.data=res.data
        }
  }
  this.$reqGeneral.req(reqObj);

  
  

  基于promise封装

  1. 创建工具类：utils目录下reqPromise.js
  

  function req(obj){
  	return new Promise((resolve,reject)=>{
  		var method=obj.method||"GET";//请求方式，默认GET
  		var url=obj.url||"";//请求url
  		var data=obj.data||{};//请求数据
  		var header=obj.header||{
  			'Content-Type':obj.contentType||'application/json'
  		};//请求头
  		var success=obj.success;//成功回调函数
  		var fail=obj.fail;//失败回调函数
  		uni.request({
  			url:url,
  			method:method,
  			data:data,
  			header:header,
  			success:((res)=>{
  				if(res.statusCode==403||res.statusCode==401){
  					//错误处理
  				}else if(res.statusCode==200){
  					resolve(res);
  				}
  			}),
  			fail:((err)=>{
  				reject(err)
  			})
  		})
  	})
  }
  export default req

  2.main.js中引入和挂载
  

  import reqPromise from "./utils/reqPromise.js"
  Vue.prototype.$reqPromise=$reqPromise

  3.创建api目录，目录下创建user.js（具体某一api请求实例）
  

  import reqPromise from "@/utils/reqPromise.js"
  export function login(data){ //登录
        return reqPromise({
               url:'test/login',
               method:'post',
               contentType:'application/x-www-form-urlencoded'
        })
  }
  

  4. 组件中使用
  

  import {login} from "@api/user.js"
  //methods
  submit(){
        let data={
               phone:'123456'
        };
        login(data).then((res)=>{
               console.log(res)
        });
  }

  
  

  带token请求封装

  1 在登录接口返回数据的那步，将token存进缓存中
  

  uni.setStorage({
        key: 'token',
        data: res.data.access_token,
        success: function () {
               uni.getStorage({
                        key: 'token',
                         success: function (res) {
                                 console.log(res.data);
                         }
                });
         }
  });

  2. 创建工具类：utils目录下reqToken.js
  

  function reqToken(obj) {
      try {
          const token = uni.getStorageSync('token');
          const username = uni.getStorageSync('username');
  		var url=obj.url||"";//请求路径
  		var method=obj.method;//请求方法
  		var data=obj.data||{};//请求数据
          if (token) {
  			var header=obj.header||{
  				'Content-Type':obj.contentType||'application/json',
  				'Authorization' :token
  			};
          }else{
              uni.navigateTo({
                  url: '../../login/login/login' //跳转到登录页面
              });
              return;
          }
      }catch (err) {
          console.log(err)
      }
  	return new Promise((resolve,reject)=>{
  		uni.request({
  			url:url,
  			method:method,
  			data:data,
  			header:header,
  			success:((res)=>{
  				if(res.statusCode==403||res.statusCode==401){
  					//错误处理
  				}else if(res.statusCode==200){
  					resolve(res);
  				}
  			}),
  			fail:((err)=>{
  				reject(err)
  			})
  		});
  	});
  }
  export default reqToken;

  3.在页面中使用
  

  import reqToken from "@/utils/requestToken.js"
  onShow(){
        reqToken({
               url:'./test/url',
               method:'POST',
        }).then((res)=>{
               console.log(res)
        });
  }

  
  

  注意：

  在前端开发中，一定不要在各个页面写请求，尽量将所有请求为api下的一些实例请求js，这样使代码更具可读性和易维护性

  
  

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

  阅读更多

• uni-app规范开发（1）设置配置文件

  uni-app

  配置文件应该是程序全局可调用的，通过main.js挂载。

  1.新建一个config目录，其下建index.js文件

  2.main.js中挂载

  //引入配置文件
  import config from './config'
  Vue.prototype.$config =config

  （import config from './config' 这种写法会默认引入其下的index命名文件）

  3.配置文件config / index.js中配置常规配置项

  let config={
  	host:'example.com'
  }
  export default config

  
  

  
  

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

  阅读更多

• JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)

  JavaScript

  验证数字：^[0-9]*$
  验证n位的数字：^\d{n}$
  验证至少n位数字：^\d{n,}$
  验证m-n位的数字：^\d{m,n}$
  验证零和非零开头的数字：^(0|[1-9][0-9]*)$
  验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
  验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
  验证非零的正整数：^\+?[1-9][0-9]*$
  验证非零的负整数：^\-[1-9][0-9]*$
  验证非负整数（正整数 + 0） ^\d+$
  验证非正整数（负整数 + 0） ^((-\d+)|(0+))$
  验证长度为3的字符：^.{3}$
  验证由26个英文字母组成的字符串：^[A-Za-z]+$
  验证由26个大写英文字母组成的字符串：^[A-Z]+$
  验证由26个小写英文字母组成的字符串：^[a-z]+$
  验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
  验证由数字、26个英文字母或者下划线组成的字符串：^\w+$
  验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。
  验证是否含有 ^%&',;=?$\" 等字符：[^%&',;=?$\x22]+
  验证汉字：^[\u4e00-\u9fa5],{0,}$
  验证Email地址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
  验证InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
  验证电话号码：^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$：--正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。
  验证身份证号（15位或18位数字）：^\d{15}|\d{}18$
  验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为：“01”-“09”和“1”“12”
  验证一个月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为：01、09和1、31。
  整数：^-?\d+$
  非负浮点数（正浮点数 + 0）：^\d+(\.\d+)?$
  正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
  非正浮点数（负浮点数 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
  负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
  浮点数 ^(-?\d+)(\.\d+)?$

  
  

  
  

  
  
  

  风口下的猪2020-08-18【JavaScript】

  阅读更多

• Android模拟器访问本地的localhost失败及解决方案

  软件开发

  在开发手机网站是，使用Android模拟器测试，在手机浏览器中输入localhost访问本地服务器失败！

  原因：

  在Android系统中localhost就是127.0.0.1

  在Windows系统中localhost也是127.0.0.1

  Android模拟器（simulator）把自己作为了localhost，也就是说，代码中使用localhost或者127.0.0.1来访问，就是访问模拟器自己！

  解决方案 1：

  若是你想在模拟器simulator访问本地电脑，那么就用Android内置的IP:10.0.2.2

  访问实例：

  

   

  解决方案2：

  就是使用本机局域网的IP地址，例如我的局域网IP：192.168.1.114

  

  然而对应的IIS，域名绑定配置如下：

  注意：对于IIS Express的访问无效，Android模拟器的浏览器不能直接访问IISExpress项目失败。

  

  
  

  
  

  风口下的猪2020-08-15【软件开发】

  阅读更多

• PHPMailer发送邮件中的坑

  thinkphp

  （1）.fsockopen 坑

  如果你使用

  $this->smtp_conn = @fsockopen($host,    // the host of the server
                                   $port,    // the port to use
                                   $errno,   // error number if any
                                   $errstr,  // error message if any
                                   $tval);   // give up after ? secs

  发送邮件，服务商默认不开启。

  你需要进入php.ini手动开启；
  

  ;extension=php_sockets.dll
  ;extension=php_openssl.dll 

  
  

  （2）.端口25被禁用

  本地测试成功后，上传到阿里的服务器后，突然发现又不行了，经过一番排查，原来阿里不让用25端口了，好吧，开来得起用ssl加密，启用ssl加密后，使用465 / 994端口。

  
  

  （3）.SMTP服务密码是你的授权码，不是登录密码

  $mail->Password = '授权码'

  
  

  
  

  
  

  
  

  
  

  风口下的猪2020-07-21【thinkphp】

  阅读更多

• TP5用PHPMailer发送邮件

  thinkphp

  整合的TP5用PHPMailer发送邮件

  
  

  由于核心文件比较长,其实代码不多,多的是注释,所以放在了附件里面,
  这里只写一下实现的代码

  <?php
  /**
   * User：李昊天
   * Tel: 15009392071
   * Email:1614369925@qq.com
   * Date: 2018/2/18
   * Time: 22:44
   */
  namespace PHPMailer;
  class SendEmail
  {
      public static $Host = 'smtp.163.com'; //smtp服务器
      private static $From = '13309406026@163.com'; //发送者的邮件地址
      private static $FromName = '李昊天'; //发送邮件的用户昵称
      private static $Username = '13309406026@163.com'; //登录到邮箱的用户名
      private static $Password = 'xxxxx'; //第三方登录的授权码，在邮箱里面设置
      /**
       * @desc 发送普通邮件
       * @param $title 邮件标题
       * @param $message 邮件正文
       * @param $emailAddress 邮件地址
       * @return bool|string 返回是否发送成功
       */
      public static function SendEmail($title=1,$message=1,$emailAddress='1614369925@qq.com')
      {
          $mail = new PHPMailer();
          //3.设置属性，告诉我们的服务器，谁跟谁发送邮件
          $mail -> IsSMTP();            //告诉服务器使用smtp协议发送
          $mail -> SMTPAuth = true;        //开启SMTP授权
          $mail -> Host = self::$Host;    //告诉我们的服务器使用163的smtp服务器发送
          $mail -> From = self::$From;    //发送者的邮件地址
          $mail -> FromName = self::$FromName;        //发送邮件的用户昵称
          $mail -> Username = self::$Username;    //登录到邮箱的用户名
          $mail -> Password = self::$Password;        //第三方登录的授权码，在邮箱里面设置
          //编辑发送的邮件内容
          $mail -> IsHTML(true);            //发送的内容使用html编写
          $mail -> CharSet = 'utf-8';        //设置发送内容的编码
          $mail -> Subject = $title;//设置邮件的标题
          $mail -> MsgHTML($message);    //发送的邮件内容主体
          $mail -> AddAddress($emailAddress);    //收人的邮件地址
          //调用send方法，执行发送
          $result = $mail -> Send();
          if($result){
             return true;
          }else{
              return $mail -> ErrorInfo;
          }
      }
  }

  使用的时候

  <?php
  namespace app\index\controller;
  use PHPMailer\SendEmail;
  class Index
  {
      public function index()
      {
          $result = SendEmail::SendEmail();
          
          if($result){
              //发送成功的处理逻辑
          }else{
              //发送失败的处理逻辑
          }
      }
  }

  
  

  下载文件

  PHPMailer.zip
  

  
  

  原文链接：http://www.thinkphp.cn/code/4075.html

  
  

  风口下的猪2020-07-21【thinkphp】

  阅读更多

• Using $this when not in object context错误原因及解决办法

  PHP

  风口下的猪2020-07-20【PHP】

  阅读更多

• Redis生存时间

  Redis

  $redis->expire($key,60); //使用秒为单位

  $redis->pExpire($key,60000);//使用毫秒作为单位

  $redis->expireAt($key,1476868380);//使用Unix timestamp,指定时间过期

  $redis->pExpireAt($key,1476868380000);//使用Unix timestamp在指定时间过期,区别是毫秒作为单位

  $redis->persist($key);//移除给定key的生存时间

  $redis->ttl($key);//返回key剩余的过期时间,使用秒为单位

  $redis->pttl($key);//返回key剩余的过期时间,使用毫秒作为单位

  
  

  风口下的猪2020-07-20【Redis】

  阅读更多