2019-04-27 20:55:02 qq_41614928 阅读数 594
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27783 人正在学习 去看看 秦子恒

微信小程序编写rgb颜色选择功能:

效果图如下:

在这里插入图片描述

以下是wxml文件代码:

<view class='box' style="background-color:rgb({{r}},{{g}},{{b}});width:100px;height:100px"></view>
<!-- slider滑动条标签 data-color="r"设置属性color:'r' 这样设置的属性在触发函数的e.currentTarget.dataset中 -->
<!-- value设置滚动条初始值 max设置滚动条区间0~255,bindchanging拖动过程中触发的事件changeing -->
<slider data-color="r" value='100' max="255" bindchanging='changeing'>红色</slider>
<slider data-color="g" value='200' max="255" bindchanging='changeing' >绿色</slider>
<slider data-color="b" value='255' max="255" bindchanging='changeing' >蓝色</slider>

以下是js代码:

Page({
  data: {
    r:0,
    g:0,
    b:0
  },
  changeing(e){
    console.log(e.currentTarget.dataset)//标签设置的属性在这获取
    let color = e.currentTarget.dataset.color
    let value = e.detail.value;
    this.setData({
      [color]:value
    })
  }
})

复制粘贴以下代码就ok啦!

效果一样哦!

2018-08-15 11:04:15 sinat_19327991 阅读数 3149
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27783 人正在学习 去看看 秦子恒

先看效果图:

这里写图片描述

目录结构:

这里写图片描述

点击此处前往码云下载此组件源码 若觉得好用,记得star一个哦

调用组件的index文件

//index.js

const app = getApp()

Page({

  data: {

  },

  myEventListener: function(e) {
    //获取到组件的返回值,并将其打印
    console.log('是否验证通过:' + e.detail.msg)
  }
})
//index.json
{
  "usingComponents": {
    "sliders": "/sliders/sliders"
  }
}
<!-- index.wxml -->

<sliders  bindmyevent="myEventListener"></sliders>

滑动验证组件部分代码:

// sliders.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    hint: '右滑验证',//默认提示语
    sysW: wx.getSystemInfoSync().windowWidth,//获取屏幕宽度
    xAxial: 0,//X轴的初始值
    x: 0,//触摸时X轴的值
    w: (wx.getSystemInfoSync().windowWidth * 0.8) - 50,//滑块可移动的X轴范围
    cssAnimation: 'translate3d(0, 0, 0)',//CSS动画的初始值
    succeedMsg: '',//验证成功提示信息的默认值
    pullStatus: true,//是否允许验证成功后继续滑动
  },

  /**
   * 组件的方法列表
   */
  methods: {

    //滑块移动中执行的事件
    moveFun: function (e) {
      //如果验证成功后仍允许滑动,则执行下面代码块(初始值默认为允许)
      if (this.data.pullStatus) {
        //设置X轴的始点
        this.data.x = e.changedTouches[0].clientX - ((this.data.sysW * 0.1) + 25);
        //如果触摸时X轴的坐标大于可移动距离则设置元素X轴的坐标等于可移动距离的最大值,否则元素X轴的坐标等于等于当前触摸X轴的坐标
        this.data.x >= this.data.w ? this.data.xAxial = this.data.w : this.data.xAxial = this.data.x;
        //如果触摸时X轴的坐标小于设定的始点,则将元素X轴的坐标设置为0
        if (this.data.x < 25) this.data.xAxial = 0;
        //根据获取到的X轴坐标进行动画演示
        this.data.cssAnimation = 'translate3d(' + this.data.xAxial + 'px, 0, 0)';

        this.setData({
          cssAnimation: this.data.cssAnimation
        })
      }
    },

    //松开滑块执行的事件
    endFun: function () {
      //自定义组件触发事件时提供的detail对象
      var detail = {};
      //如果触摸的X轴坐标大于等于限定的可移动范围,则验证成功
      if (this.data.x >= this.data.w) {
        //元素X轴坐标等于可移动范围的最大值
        this.data.xAxial = this.data.w;
        //设置验证成功提示语
        this.data.succeedMsg = '验证成功';
        //设置detail对象的返回值
        detail.msg = true;
        //验证成功后,禁止滑块滑动
        this.data.pullStatus = false;
      } else {
        //元素X轴坐标归0
        this.data.xAxial = 0;
        //清空验证成功提示语
        this.data.succeedMsg = '';
        //设置detail对象的返回值
        detail.msg = false;
      }

      //使用triggerEvent事件,将绑定在此组件的myevent事件,将返回值传递过去
      this.triggerEvent('myevent', detail);
      //根据获取到的X轴坐标进行动画演示
      this.data.cssAnimation = 'translate3d(' + this.data.xAxial + 'px, 0, 0)';

      this.setData({
        succeedMsg: this.data.succeedMsg,
        cssAnimation: this.data.cssAnimation
      }) 
    }
  }
})
//sliders.json

{
  "component": true,
  "usingComponents": {}
}
<!-- sliders.wxml -->

<view class="slidersBox">
  <text>{{ hint }}</text>
  <view class='operationBgBox' style='left: {{ -(w + 2) }}px; transform: {{ cssAnimation }}'>
    <text>{{ succeedMsg }}</text>
    <view class='operationBox' catchtouchmove='moveFun' catchtouchend='endFun'>
      <image src='../images/line.png'></image>
    </view>
  </view>
</view>
/* sliders.wxss */
.slidersBox {
  width: 80%;
  height: 120rpx;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  line-height: 120rpx;
  font-size: 32rpx;
  position: relative;
  overflow: hidden;
}

.operationBgBox {
  height: 120rpx;
  width: 100%;
  background-color: #7BBB55;
  border-radius: 5px;
  overflow: hidden;
  position: absolute;
  top: 0;
  color: #fff;
}

.operationBox {
  height: 120rpx;
  width: 50px;
  background-color:#EBEBEB;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
}

.operationBox image {
  width: 50%;
  height: 50%;
}
2018-07-12 14:17:15 weixin_39872588 阅读数 6999
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27783 人正在学习 去看看 秦子恒

要实现下图这种关于canvas的滑动


跟所有人的想法相同,第一次使用canvas绘制的折线图,我选择了放在scroll-view 内,在开发者工具上是可以实现滑动的,但是在真机上面发现不能滑动.原因是canvas层级是最高的,后来发现官方文档已经明确说明


经过无数种方法的测试,.始终会存在一个问题.就是滑动不流畅.比如通过绑定canvas的时间,获取移动的距离,从而改变canvas的位置, 这种方法是极不流畅的,非常的生硬.

下面我将给出两个解决办法,一个方法是目前最好的解决办法,一个方法是一点僵硬的解决方法,但是两个方法应该就是目前唯一能解决这个问题的办法.大家可以结合使用场景来选择其中的一个办法.

两个方法能必须用同样的一个标签,那就是 scroll-view标签.目前为止滑动效果最流畅的就是scroll-view 和swiper标签,所以我们会发现在很多切换和滑动的场景都会用到这两个标签.


方法1.将绘制出的canvas 保存为本地路径的一个img 路径.然后将图片放到 scroll-view 里面,进行滑动.亲测,滑动最流畅.

每个场景不同,绘制canvas的方法我就在这里不作累述.本博客的其他文章也会给出两种情况的绘制方法.

html:

<scroll-view class="temp_day_box" scroll-x>
  <view class="canvas_height">
     <image class="canvas_img" src='{{canvasSaveimg}}'></image>
  </view>
</scroll-view>
<canvas canvas-id="canvasWeather" class="canvasHigh"></canvas> 

css:

.canvasHigh {
    width: 2250rpx;
    height: 270rpx;
    transform: translateX(-200%);
}
.canvas_img{
    width: 2250rpx;
    height: 270rpx;
}

这里的canvasHigh的css属性可以用很多其他的方式隐藏,但是这里注意的是一定不能用display:none;或者 标签里面加hidden,wx:if属性,这样保存下来的图片路径是不会显示出来的.具体原因不详.

JS:

//前面的写法这里就不再编写,可以查看相关文档和官方api
ctx.draw();
wx.canvasToTempFilePath({
    canvasId: 'canvasWeather',//canvasId和标签里面的id对应
    success: (res) => {
        var shareTempFilePath = res.tempFilePath;
        _this.setData({
            //将获取到的图片临时路径set到canvasSaveimg中
            canvasSaveimg:shareTempFilePath
        })
    }
}) 

方法2.在scroll-view标签中绑定一个滚动时触发的事件,这里就不需要保存为图片,但是动画效果有点小小的僵硬.

html:

<scroll-view class="temp_day_box" scroll-x bindscroll='scrollCanvas'> 
  <view class="canvas_height" style='transform: translateX(-{{canvasLen}}px);'>
    <canvas canvas-id="canvasWeather" class="canvasHigh"></canvas> 
  </view>
</scroll-view>

JS:

scrollCanvas: function(e) {
    console.log(e);
    var canvasLen = e.detail.scrollLeft;
    this.setData({
        canvasLen: canvasLen
    })
}

大家两种方式都可以试一下,选取一个最适合自己场景的方法.!


2019-09-01 18:17:32 yxy099 阅读数 12
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27783 人正在学习 去看看 秦子恒

滑块视图
智享自驾微信小程序的首页需要添加一个滑块视图,就是自动滑动的图片
首先我们在微信开发文档的组件中找到滑块视图
在这里插入图片描述这里面包含了滑块视图的所有属性,然后再找到实例代码
在这里插入图片描述复制这一段代码到微信开发者工具中,根据自己的要求进行更改并填写属性。这里可以修改图片自动切换的时间以及滑动动画的时间,我设置的图片自动切换时间为5000,滑动动画的时间为1000.
在这里插入图片描述

再复制swiper-item这段代码在下面,这里是图片的来源,我这里写了三段就插入三张图片
在这里插入图片描述最后效果如下:
在这里插入图片描述

2019-08-10 00:34:26 denzeleo 阅读数 107
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27783 人正在学习 去看看 秦子恒
#!/usr/bin/env/python3
# -*- coding:utf-8 -*-
'''
Author:leo
Date&Time:2019-08-09 and 22:11
FileName:20190809_咖啡小程序.py
Description:...
小程序:成都购房助手
如何查看微信webview中的元素
1、手机打开【开发者模式】
2、app必须是debug模式。
3、手机通过USB连接电脑,且能够识别出来手机。
4、可以科学上网。

如何配置微信desired_caps环境参数
1、打开微信,在任意对话框中输入debugx5.qq.com。
2、点击发送成功的debugx5.qq.com,稍等片刻点击进入设置页面
3、切换到【seeting】,勾选【是否打开tbs内核】,保存退出
4、退出设置,重启微信端
5、开启谷歌浏览器的科学上网模式
6、打开chrome,地址栏输入chrome://inspect/#devices,可以看到设备介绍
7、接下来就可以轻松识别元素了,和用f12查看元素没有区别,请开始你的表演

代码实战(由于我没有安卓手机,只能用模拟器,模拟器没有网络,遂只能做到基础应用):
上面这些搞定了,在Appium里写代码就简单了,先说下关键的几个点:
1、#必须加上此句desired_caps['chromeOptions']={'androidProcess': 'com.tencent.mm:tools'}
   #微信的package name=com.tencent.mm,activity=com.tencent.mm.ui.LauncherUI。
2、#可以通过下面的语句输出webview的名称
contexts=driver.contexts
print('contexts=',contexts)
3、#使用下面的语句切换到指定的webview里
driver.switch_to.context('WEBVIEW_com.tencent.mm:tools')
4、切换到webview里面,剩下的定位方式和web一模一样,就是上面讲的元素识别方法
5、#如果想返回原生态的view,可以用下面的语句
'''
from appium import webdriver
from time import sleep
desired_caps = {
    'platformName': 'Android',
    'platformVersion': '5',
    'deviceName': '127.0.0.1:62001',
    # 'app': r'D:\TestFiles\Appium\Apk\sqauto.apk',
    'appPackage': 'com.tencent.mm',
    'appActivity': 'com.tencent.mm.ui.LauncherUI',
    'unicodeKeyboard': True,
    'resetKeyboard':True,
    'noReset': True, # 初始化,True为了避免每次打开APP都提问你是否获取权限
    'newCommandTimeout': 6000,
    'automationName':'uiautomator2'
}
driver = webdriver.Remote("http://127.0.0.1:4723/wd/hub",desired_caps)
driver.implicitly_wait(20)
sleep(10)

text1 = driver.contexts
currentText = driver.current_context
print(f"全部上下文:{text1},当前上下文:{currentText}")

# 微信顶部标题栏
title = driver.find_element_by_id("com.tencent.mm:id/qh")
print(f"当前标题栏:{title.text}")
sleep(15)

# 点击搜索按钮
driver.find_element_by_id("com.tencent.mm:id/qi").click()
sleep(10)

# 输入星巴克搜索
driver.find_element_by_id("com.tencent.mm:id/li").send_keys("星巴克\n")
sleep(3)
driver.find_element_by_id("com.tencent.mm:id/c2h").click()
sleep(10)

# 网络异常打印title
print(driver.find_element_by_accessibility_id("当前所在页面,搜一搜").text)
sleep(5)

# 返回主页
driver.find_element_by_accessibility_id("返回").click()
sleep(5)
driver.find_element_by_accessibility_id("返回").click()
sleep(5)

# 初始化坐标
size = driver.get_window_size()
print(size)
startx = size["width"]*0.5
starty = size["height"]*0.2
endy = size["height"]*0.8
sleep(5)

# 下拉显示小程序
driver.swipe(startx, starty, startx, endy, 500)
sleep(5)

# 打印小程序名称
name = driver.find_element_by_xpath("//android.widget.TextView[@text='成都购房顾问']")
print("小程序名称为:%s" %(name.text))

# # 微信底部菜单栏
# wechat = driver.find_element_by_id("com.tencent.mm:id/b9g")
# print(wechat.text)

input("Press anykey to quit...")
driver.quit()

--------------------------------------------------------------------------------------------------

全部上下文:['NATIVE_APP'],当前上下文:NATIVE_APP
当前标题栏:微信

当前尺寸:{'width': 1080, 'height': 1920}
小程序名称:成都购房顾问
菜单:微信,通讯录,发现,我

Process finished with exit code 0

没有更多推荐了,返回首页