标签 - 微信小程序 共找到结果 5 条

ONE·一个 每日阅读

复杂世界里,一个就够了。

该小程序所有数据均由 「ONE · 一个」 提供,本人采取非正常手段获取,仅作为日常学习之用。获取跟共享的行为或许有侵犯权益的嫌疑。若被告知需停止共享与使用,本人会及时删除该小程序与整个项目。

在线访问html5版:https://one.mrabit.com

小程序码:

gh_35dcdd9b6f58_258.jpg

GitHub仓库地址: https://github.com/mrabit/WeChatApp_ONE

阅读全文

在开发小程序时候,所有功能都正常使用,不管是开发板、体验版,发送模版消息都是能正常工作的,结果发布正式版的时候,设定定时任务发送模版消息却失败了。 找到后端代码调试了一番发现发送模版消息返回的数据

{“errcode”:41030,”errmsg”:”invalid page hint: [gP1eXXXXXX]”}

查看 小程序文档 发现:

QQ20180906092421.png

原来是在调用发送模版消息接口的时候page参数写错了:

{
    ...
    page: `/pages/oneDetails/oneDetails?id=${oneDetails.id}`,
    ...
}

正确的做法是:

{
    ...
    page: `pages/oneDetails/oneDetails?id=${oneDetails.id}`,
    ...
}

pages前面不需要加上 /

不过在开发版和体验版上为什么是正常的这就不知道了https://ws4.sinaimg.cn/bmiddle/62e721e4gw1et02g5wksrj200k00k3y9.jpg

阅读全文

近期手上有个小程序项目,UI妹纸给的对话框效果图需要自定义,因为wx.showModal无法自定义内容,例如icon图标,字体大小之类的,只能自定义一个Modal组件。

下面是自定义组件的文件:

1. dialogModal.js


Component({
  properties: {
    // 模态框 显示/隐藏
    modalHidden: {
      type: Boolean,
      value: false
    }, //这里定义了modalHidden属性,属性值可以在组件使用时指定.写法为modal-hidden,
    showCancel: {
      type: Boolean,
      value: true
    },
    // 模态框title标题
    modalTitle: {
      type: String,
      value: '',
    },
    // 模态框msg内容
    modalMsg: {
      type: String,
      value: ''
    },
    // 模态框状态 1.‘’;2.‘success’;3.‘error’
    modalType: {
      type: String,
      value: ''
    }
  },
  methods: {
    // 防止事件冒泡,阻止page滚动事件
    moveD: () => { },
    // modal取消点击事件
    modal_cancel: function () {
      // 隐藏模态框
      this.setData({
        modalHidden: true,
      })
    },
    // modal确认点击事件
    modal_confirm: function (e) {
      this.modal_cancel();
      var eventDetail = {} // detail对象,提供给事件监听函数
      var eventOption = {} // 触发事件的选项
      this.triggerEvent('handleConfirm');
    }
  }
})

2. dialogModal.json

{
  "component": true,
  "usingComponents": {}
}

3. dialogModal.wxml

<!--components/dialogModal/dialogModal.wxml-->
<view hidden='{{modalHidden}}' class="dialog-modal" catchtouchmove='moveD'>
  <view class='mask_layer' />
  <view class='modal_box'>
    <image bindtap='modal_cancel' src="../../images/modal_close.png" class="modal-close"></image>
    <view class='modal-body'>
      <view>
        <view class="modal-title">
          <image src="../../images/error.png" wx:if="{{modalType == 'error'}}"></image>
          <image src="../../images/success.png" wx:if="{{modalType == 'success'}}"></image>
          <text>{{modalTitle}}</text>
        </view>
        <!-- modal状态为'success',只显示标题 -->
        <view class="modal-content" wx:if="{{modalMsg}}">
          <text>{{modalMsg}}</text>
        </view>
      </view>
    </view>
    <view class='modal-btn'>
      <text wx:if="{{showCancel}}" bindtap='modal_cancel' class='modal-cancel'>取消</text>
      <text bindtap='modal_confirm' class='modal-confirm'>确定</text>
    </view>
  </view>
</view>

4. dialogModal.wxss

/* components/dialogModal/dialogModal.wxss */

.dialog-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mask_layer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}

.modal_box {
  position: relative;
  width: 91.4%;
  overflow: hidden;
  z-index: 1001;
  background: #fff;
  border-radius: 3px;
}

.modal-close {
  position: absolute;
  right: 16rpx;
  top: 16rpx;
  width: 20rpx;
  height: 20rpx;
}

.modal-body {
  text-align: center;
  /* margin: 30rpx 0; */
  display: flex;
  overflow-y: scroll; /*超出父盒子高度可滚动*/
  min-height: 228rpx;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
}

.modal-body image {
  width: 44rpx;
  /* vertical-align:-6rpx; */
  height: 44rpx;
  margin-right: 15rpx;
}

.modal-title {
  padding: 20rpx 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gazure;
  font-size: 32rpx;
  color: #484848;
  letter-spacing: 0.36px;
}

.modal-content {
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #484848;
  letter-spacing: 0.31px;
}

.modal-btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: #fff;
}

.modal-cancel {
  width: 100%;
  padding: 40rpx;
  text-align: center;
  border-top: 1rpx solid #f3f3f3;
  border-right: 1rpx solid #f3f3f3;
  font-size: 28rpx;
  color: #fd5612;
  letter-spacing: 0.31px;
}

.modal-confirm {
  width: 100%;
  padding: 40rpx;
  background-color: #fff;
  text-align: center;
  border-top: 1rpx solid #f3f3f3;
  font-size: 28rpx;
  color: #fd5612;
  letter-spacing: 0.31px;
}

.modal-msg {
  text-align: center;
  margin-bottom: 50rpx;
  display: block;
}

接下来就是在我们的index页面里使用自定义的Modal组件:

1. index.json

{
  "usingComponents": {
    "modal": "../../components/dialogModal/dialogModal"
  }
}

2. index.wxml

<!--index.wxml-->
<view class="container">
  <modal bind:handleConfirm="modalConfirmCallBack" modal-hidden="{{modal.hidden}}" modal-title="{{modal.title}}" modal-msg="{{modal.msg}}" modal-type="{{modal.type}}" data-params="{{modal.params}}"></modal>
  <button bindtap='handleDefaultClick'>default</button>
  <button bindtap='handleSuccessClick'>success</button>
  <button bindtap='handleErrorClick'>error</button>
</view>

3. index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    modal: {
      hidden: true,
      title: '',
      msg: '',
      type: '',
      params: {}
    }
  },
  handleDefaultClick: function () {
    this.setData({
      'modal.hidden': false,
      'modal.title': 'default标题',
      'modal.msg': 'default内容',
      'modal.type': '',
      'modal.params': {
        type: 'default'
      }
    })
  },
  handleSuccessClick: function () {
    this.setData({
      'modal.hidden': false,
      'modal.title': 'success标题',
      'modal.msg': 'success内容',
      'modal.type': 'success',
      'modal.params': {
        type: 'success'
      }
    })
  },
  handleErrorClick: function () {
    this.setData({
      'modal.hidden': false,
      'modal.title': 'error标题',
      'modal.msg': 'error内容',
      'modal.type': 'error',
      'modal.params': {
        type: 'error'
      }
    })
  },
  modalConfirmCallBack: function (e) {
    const params = e.target.dataset.params;
    console.log(params);
  }
})

4. index.wxss

/**index.wxss**/

.container button {
  margin-top: 20rpx;
}

modal {
  z-index: 1024;
}

具体代码在: mrabit/wx_app_component

参考地址:

阅读全文

后台一直都是密码登录,简直枯燥的没朋友,看见小伙伴的博客设置的是扫描二维码登录,然后请教了一番加上自己的理解,实现了小程序配合扫码登录后台

首先是要理解扫码登录的逻辑,在我看来扫码的小程序就是superadmin,扫码就能实现后台的token生成,保存到redis,发放给前端页面,所以小程序的权限设置是很重要的,这里单独新增一个表:tp_wx,存放微信账号的唯一标识,可读可写:

OPEN_ID字段就是小程序里 wx.login 方法的返回值,用户唯一标识, 数据库里不存在该OPEN_ID的话当然是没有权限的:

下面是简单的思路:

  1. websocket连接服务端之后保存一个自定义的标识,对应相应客户端,下面把这个标识称之为key

  2. 再把这个key通过qrcode生成二维码显示到页面上等待小程序扫码读取

  3. 小程序扫码后,获取到这个key并发送给服务端

  4. 服务端再通过小程序发送的key找到对应的客户端并提示登录成功或者失败

具体代码已上传至github: websocket-wxApp-login

参考地址:

阅读全文

  1. 小程序刚出来的时候使用过,当时炒的很火的小程序,不去试试水怎么可以,不过当时不对个人开发者开放,后来小程序对个人开发者开放后修改了部分代码并发布

  2. 当时博客前端代码是用jQuery的js框架,bootstrap的css框架,requireJS的模块化引入工具写的,后台代码由ThinkPHP3.2 + Mysql实现.

  3. 小程序需要网站HTTPS化,正好服务器是阿里云的就直接申请了证书实现了网站的SSL.

  4. 博客写了个定时任务爬去Bing每日图片并存放在七牛云储存,所以小程序可以直接读取数据库里的数据去七牛云储存取数据出来.

  5. 前段时间学习了Vue.js就把博客重构了一遍,使用Vue.js + express + mysql实现了效果并利用JWT进行权限认证,redis储存JWT生成的token值,websocket进行后台管理系统的踢人操作.

  6. HTML版bing每日一图: https://blog.mrabit.com/bing.html

  7. 小程序二维码:

阅读全文