ThinkPHP 3.2 使用的一些记录

Categories 学习笔记

在 View 模板引擎中输出数组的下标值

如 数组 $list 和 下标 $data.vo.id

{$list[$data[vo][id]]}

若变量为空，赋予默认值（判断空）

{$vo.position_id|default='空'}

获得 MySQL 数据表备注

//获取备注信息
public function _get_field() {
  $model = new \Think\Model();
  $controller_name = $this->CamelCaseToUnderScore(CONTROLLER_NAME);
  $rs = $model->query("select `column_name`,`column_comment` from information_schema.COLUMNS WHERE TABLE_SCHEMA = '".C('DB_NAME')."' AND TABLE_NAME = '".C('DB_PREFIX').$controller_name."'");

  $arr = array_column($rs,'column_comment','column_name');
  return $arr;
}
//驼峰命名转下划线命名
public function CamelCaseToUnderScore($str)
{
  $dstr = preg_replace_callback('/([A-Z]+)/',function($matchs)
  {
    return '_'.strtolower($matchs[0]);
  },$str);
  return trim(preg_replace('/_{2,}/','_',$dstr),'_');
}

PHP 数组变量传递给 JS

var arr=transArr({$array|json_encode=true}); 
function transArr(obj) {
  var tem=[];
  $.each(obj, function(i) {
	tem[i]=obj[i];
  });
  return tem;
}

生成指定页面带参数的微信小程序码

Categories 学习笔记

使用 Postman GET 请求

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=xxxxxxxxxxxxx&secret=xxxxxxxxxxxxx

保存下 access_token，然后 POST 请求，配置如下，请求获得小程序码

https://api.weixin.qq.com/wxa/getwxacode?access_token=xxxxxxxxxx

或请求生成 QR 二维码

https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=xxxxxxxxxx

PHP 二维数组 按照 Value 中某 key 进行排序 获得另一个 key 的排序

Categories 学习笔记 
<?php
$arr = [
    ['id'=>1,'main'=>222],
    ['id'=>2,'main'=>333],
    ['id'=>2,'main'=>444],
    ['id'=>1,'main'=>111],
    ['id'=>3,'main'=>122],
    ];
    
    $a = array_column($arr,'main');
    $b = array_column($arr,'id');
    
    echo "<pre>";
    var_dump($a,$b);
    var_dump(array_multisort($a,SORT_DESC,$b));
    var_dump($a,$b);
?>

array_multisort() 先把第一个数组按照键值的大小排序，然后其它数组都按照第一个数组的调整策略进行调整。

优化一下则为

<?php

$arr = [
    ['id'=>1,'main'=>222],
    ['id'=>2,'main'=>333],
    ['id'=>2,'main'=>444],
    ['id'=>1,'main'=>111],
    ['id'=>3,'main'=>122],
    ];
    
    echo "<pre>";
    array_multisort(array_column($arr,'main'),SORT_DESC,$arr);
    var_dump($arr);
?>

封装一个微信小程序 多功能模态框组件 Modal

Categories 学习笔记

自定义一个微信小程序多功能模态框，可以输入文本 textarea，可以多选列表 CheckBox

组件

/components/modal/index.js

const app = getApp()
Component({
  properties: {
    show: {
      type: Boolean,
      value: true
    },
    title: {
      type: String,
      value: '标题'
    },
    moreRight: {
      type: String,
      value: ''
    },
    moreLeft: {
      type: String,
      value: ''
    },
    content: {
      type: String,
      value: '内容'
    },
    list: {
      type: Array,
      value: [
        {
          title: '测试',
          id: ''
        }]
    },
    bg:{
      type:Boolean,
      value:true
    },
    mode: {
      type: String,
      value: 'content'
    },
    btnLeft: {
      type: String,
      value: '取消'
    },
    btnRight: {
      type: String,
      value: '确定'
    }    
  },
  data: {

  },
  
  methods: {
    _none:function(){
      //nothing
    },
    _hideDialog(){
      this.setData({
        show:false
      })
      console.log('hide')
      this.triggerEvent('tapBg')
    },

    _showDialog() {
      this.setData({
        show: true
      })
    },
    _textarea(e){
      console.log(e.detail.value)
      var value = e.detail.value
      this.triggerEvent("myInput",value)
    },
    _tapLeft() {
      this.triggerEvent("tapLeft")
    },
    _tapRight() {
      this.triggerEvent("tapRight")
    },
    _moreRight() {
      this.triggerEvent("moreRight")
    },
    _moreLeft() {
      this.triggerEvent("moreLeft")
    },
    _checkboxChange(e){
      // console.log(e.detail.value)
      var value = e.detail.value
      this.triggerEvent("select", value)
    },
  },  
})

/components/modal/index.json

{
  "component": true
}

/components/modal/index.wxml

<view class="mask" style="{{show?'z-index: 1;opacity:0.7':''}}"></view>
<view class='modalBg' bindtap='_hideDialog' wx:if="{{show}}">
  <view class="modalDlg" catchtap='_none'>
    <view class='_modalTitle'>
      <view catchtap='_moreLeft' class='_more-left'>{{moreLeft}}</view>
      <text class='_title'>{{title}}</text>
      <view catchtap='_moreRight' class='_more-right'>{{moreRight}}</view>
    </view>
    <view wx:if="{{mode=='content'}}">{{content}}</view>
    <textarea wx:if="{{mode=='textarea'}}" bindinput='_textarea' value="{{content}}">
    </textarea>
    <scroll-view scroll-y="{{true}}" wx:if="{{mode=='list'}}">
      <view class='_check-container'>
        <checkbox-group bindchange="_checkboxChange">
          <label class="checkbox" wx:for="{{list}}" wx:key="{{key}}">
            <checkbox value="{{item.id}}" />
            <text class='checkbox-text'>{{item.title}}</text>
          </label>
        </checkbox-group>
      </view>
    </scroll-view>
    <view class='button-container'>
      <button catchtap="_tapLeft">{{btnLeft}}</button>
      <button catchtap="_tapRight">{{btnRight}}</button>
    </view>
  </view>
</view>

/components/modal/index.wxss

/* 自定义模态框 */

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: -99999;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.modalBg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
}

.modalDlg {
  width: 580rpx;
  min-height: 200rpx;
  max-height: 900rpx;
  position: relative;
  z-index: 9999;
  background-color: #fff;
  border-radius: 10rpx;
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; */
  overflow: hidden;
}

.modalDlg>view {
  font-size: 30rpx;
  min-height: 60rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.modalDlg>view:first-child {
  height: 80rpx;
  font-weight: 700;
  width: 100%;
  border-bottom: 1rpx solid #ccc;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.modalDlg>view:nth-child(2) {
  height: 100rpx;
  margin: 0 40rpx;
}

.modalDlg>view {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.modalDlg>view>button {
  width: 290rpx;
  height: 80rpx;
  font-size: 30rpx;
  border-radius: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-top: 1rpx solid #ccc;
}

.modalDlg>view>button:first-child {
  border-right: 1rpx solid #ccc;
}

.modalDlg>view>button::after {
  border-radius: 0;
  border: none;
}

._modalTitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

._title {
  margin: 10rpx;
  text-align: center;
  width: 560rpx;
  padding: 10rpx;
}

._more-right {
  position: absolute;
  right: 20rpx;
  font-size: 20rpx;
  font-weight: 400;
}

._more-left {
  position: absolute;
  left: 20rpx;
  font-size: 25rpx;
  font-weight: 400;
}

scroll-view {
  height: inherit;
  width: inherit;
  overflow: hidden;
  max-height: 735rpx;
}

._check-container checkbox-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #fefefe;
  padding-left: 20rpx;
}

使用方法

/pages/test/test.json

{
  "usingComponents": {
    "my-modal": "/components/modal/index"
  }
}

/pages/test/test.wxml

<my-modal title="{{modal.title}}" mode="{{modal.mode}}" show="{{myModalShow}}" content="{{modal.content}}" btn-left="{{modal.btnLeft}}" btn-right='{{modal.btnRight}}'  bind:tapLeft="{{modal.tapLeft}}" bind:tapRight="{{modal.tapRight}}" bind:tapBg="tapBg"></my-modal>

/pages/test/test.js

  myModalShow: function() {
    console.log('myModalShow')
    this.setData({
      myModalShow: true
    })
  },

  myModalHide: function() {
    this.setData({
      myModalShow: false,
      modal: {},
    })
  },
  showit:function(){
    var modal = {
      mode: 'content',
      content: '这是内容',
      title: '提示',
      btnLeft: '取消',
      btnRight: '确定',
      tapLeft: 'myModalHide',
      tapRight: 'do',
    }
    that.setData({
      modal: modal,
    })
    that.myModalShow()
  },

/pages/test/test.wxss


checkbox-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.checkbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.checkbox-text {
  font-size: 25rpx;
}

/*  重写 checkbox 样式  */

checkbox-group{
  
  font-size:28rpx;
}
checkbox-group label{
  line-height:60rpx;
}
checkbox-group label:first-child{
  margin-top:10rpx;
}

/* 未选中的 背景样式 */

checkbox .wx-checkbox-input {
  border-radius: 50%; /* 圆角 */
  width: 40rpx; /* 背景的宽 */
  height: 40rpx; /* 背景的高 */
  margin-top: -8rpx;
}

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  /* border: none;  */
  background: rgb(217, 50, 124);
}

/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  display: flex;
  border-radius: 50%; /* 圆角 */
  width: 20rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
  height: 25rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
  line-height: 25rpx;
  text-align: center;
  font-size: 20rpx; /* 对勾大小 30rpx */
  color: #fff; /* 对勾颜色 白色 */
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

微信小程序 左上角返回主页按钮 自定义顶部导航栏

Categories 学习笔记

小程序设置 "navigationStyle": "custom"后在哪里自行定义导航栏样式？

https://segmentfault.com/q/1010000015377537

在 app.json 里进行更改 "navigationStyle":"custom" 即可全屏显示，然后自定义顶部样式

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#44c9fb",
    "navigationBarTitleText": "小程序名字",
    "navigationBarTextStyle":"#fff",
    "navigationStyle":"custom"
  }
}

封装成组件可参考这篇文章

微信小程序 自定义头部导航栏 navigationStyle

https://www.jianshu.com/p/7393c800ba09

ThinkPHP 使用 WorkerMan 的一些记录

Categories 学习笔记

通过 composer 安装

composer require topthink/think-worker

启动

php think worker

初次使用可能会报错

[root@instance-jewlel2q www.imgram.cn]# php think worker
Starting Workerman http server...
Workerman[think] start in DEBUG mode
stream_socket_server() has been disabled for security reasons in file /home/wwwroot/www.imgram.cn/vendor/workerman/workerman/Worker.php on line 2178

原因是 stream_socket_server 函数被 php.ini 禁用

  • 运行 php –ini 找到 php.ini 文件
  • 打开 php.ini 找到 disable_functions 一项，将 stream_socket_server 禁用项删掉。
  • 重启 php-fpm。