2019-10-13 17:50:52 qq_26542493 阅读数 12
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

背景

最近在用cocoscreator做一个对战的小游戏,通信用的socket.io模块,客户端语言用的ts,后端用的node.js
简单的功能做的差不多了,然后打包到微信开发者工具和真机进行调试时发现了一些匪夷所思的问题(也许只是对我来说是这样)。记录一下,以避免以后踩同样的坑。

一、self in not defined

在这里插入图片描述
在本地和开发者工具中调试都是正常的,但是不知为什么到真机调试的时候就会报这样的一个错。
国庆前,就一直搞这个问题,cocos论坛和微信开发社区,大佬群各种地方发帖子,寻求解决办法。最终,无疾而终。

终于在国庆之后,死马当活马医。在我全局搜索项目中哪里用到了self之后,发现socket.io.js里边有几个self。代码是压缩状态,我也没仔细看里边的逻辑是怎样的,猜测有可能是这里边self有问题吧。
反正已经试了很多方法了,也不差这一下,换个socket包试一下吧。

于是,我把socket.io.js(客户端用)的版本改为之前在论坛找到的一个包,版本1.4.4。

最终测试,竟然成功了,困扰我半个月之久的问题终于解决了。

总结:
1.用1.4.4版本的socket.io.js客户端包
2.执行命令 npm install @types/socket.io-client 得到的1.4.5的ts声明文件(ts智能提示需要)

疑问:socket.io包的版本是:^2.2.0,socket.io.js也是从这里边拿出来的,版本相同按理说应该是没问题的,为什么这儿却不行。

如果你也需要使用 ts的.d.ts + socket.io.js ,我打了一个包,可以下载
ts+socket.io
没有积分的,可以留言邮箱,我给你发。

二、json对象的循环引用

Converting circular structure to JSON;at setTimeout callback function
TypeError: Converting circular structure to JSON
at JSON.stringify ()
在这里插入图片描述
看问题是在onLoad的时候,JSON.stringify 方法报的错,
原代码里,我做了一个判断,

//window.global不存在时,则初始化
if (window.global == null || JSON.stringify(window.global) == '{}'){
		window.global = {};
}

因为此时window.global是undefined,所以导致了JSON.stringify出错。
把这句改为 if(!window.global) 就可以了。

三、cannot set property ‘’ of undefined

在这里插入图片描述
PS:按理说,这种问题很简单,就和java的空指针类似,肯定是哪个变量没有定义才导致的。顺着这个思路走下去。

看错误提示,是addPlayer方法里边出的错,经排查发现是取global的一个属性时,这个属性还未定义。
因此,在入口程序的脚本里边把所有用到的全局变量都初始化一下。
类似于这样的:window.global = { a:null, b:{}, c:[] };

然而,重新测试还是这样的问题,百思不得其解,我已经初始化了,为什么还是找不到变量。于是,我在微信开发者工具里进行断点调试。

这里无奈吐槽一下,我简直要被微信开发者工具的debug工具误导死了,还以为是json解析异常呢。让我走了很多弯路。

首先说明一下,下边的data是从服务器接收的一个嵌套的对象,结构类似于

{
	players:{
		aaa: {
			name: "zhangsan",
			age: 12
		},
		bbb: {
			name: "lisi",
			age: 13
		}
	}
}

看debug步骤:
step1: 此处data值显示正常
在这里插入图片描述
step2: data.players显示的值也正常
在这里插入图片描述
step3: 发现let players = data.players这一行赋值语句,赋值后的players为一个字符串
在这里插入图片描述
这就很奇怪了,players本来应该是一个对象的,为什么在这却变成了一个字符串呢?

此处略过我的各种猜测,又改服务器代码,又该客户端代码的。(内心MMP)

虽然看着这语法没有什么不对的地方,但是我一时半会怎么也想不通到底结果为什么是这样。但是我不信邪,我就不信了,这么个小问题我还搞不定你了。

最终,我在控制台打印了一下global变量的时候,发现了重要的问题所在,此时global定义的空对象{}和空数组[]竟然全是undefined未定义的。明明,我已经在游戏开始场景定义了啊。算了,那我在本场景再重新定义一下吧。

终于,一番操作之后,问题被解决了。控制台也能正常的打印出来global空数组和空对象。此时再去看我debug的变量let players = data.players,players竟然显示正常了,WHAT???
微信,你玩我呢是吧。真是把我害惨了好吗。为什么同样的代码,刚才显示异常,现在显示又正常了呢??完美的把我的注意点带偏了。

总结:这个问题,导致的原因,是跨场景时global定义的空对象和空数组不识别,需要重新定义。
也引出了另外一个问题,global已经是全局的变量了,为什么里边的空对象和空数组在初始场景定义了,进入到其他场景却还是undefined呢?(global里边定义的null可以正常的跨场景)这个问题,容我以后再研究,有知道的小伙伴可以留言告诉我,谢谢~

2016-06-07 15:45:46 wilgl1314 阅读数 14851
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

背景:使用微信web开发者工具进行移动调试,按照


配置网络代理后,如图:


当重启微信后,发现公共号上不去了,也不能正常的上网了

可以将服务器地址更改为:


去掉http://后再尝试,就可以了,然后选择微信web开发者工具,选择“”开始调试“,浏览公众号网页,就能开始调试了

2018-10-12 18:59:07 IT_aLun 阅读数 2892
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

1、问题描述:

(1)使用微信小程序的  wx.playBackgroundAudio(Object object) 等不再维护的接口向 wx.getBackgroundAudioManager 中转移,来管理微信小程序的后台播放器播放音乐。

(2)在微信开发者工具中可以播放背景音乐,真机调试:Android手机可以正常播放背景音乐;但是 ios 在真机调试的时候不能正常播放,没有声音。

2、代码:

(1)app.json:              

{
    "pages": [
        "pages/video/index"
    ],
    "window": {
        ...
    },
    "requiredBackgroundModes": ["audio"] // 后台播放音乐必须设置
}

(2)index.js:         

 /** 背景音乐播放 **/
const backgroundAudioManager = wx.getBackgroundAudioManager();
backgroundAudioManager.title = ''; // 没有播放的原因
// backgroundAudioManager.epname = '';  // 可注释,没有影响
// backgroundAudioManager.singer = '';  // 可注释,没有影响
// backgroundAudioManager.coverImgUrl = '';  // 可注释,没有影响
// 设置了 src 之后会自动播放
backgroundAudioManager.src =  'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46';
backgroundAudioManager.onError((err) => { // 真机调试
    console.log(err) 
})

3、问题原因 和 解决办法:

(1)问题原因:backgroundAudioManager.title  很多开发者没有写 或者 backgroundAudioManager.title = '';

(2)问题解决:backgroundAudioManager.title = 'string或者空格';

2019-03-29 23:58:19 pu_yu_hun_jin 阅读数 1505
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

最近在做我司的小程序开发,再给组件设置背景图片,引用的是本地图片,微信开发者工具中没有问题,可在真机中跑就不行了,代码如下:

.img-background {
  background: url('../../beauty.png');
  width: 200rpx;
  height: 160rpx;
}

原谅我是小白啊(确实是小白,之前一直做安卓开发,不过对前端很有兴趣,嘿嘿!现在努力准备开一下前端的小飞机!!!)

搜索一番,找到了解决方案,在此记录下:有如下两种
1、图片直接引用网络图片

.img-background {
  background: url('http://xx/xx/beauty.png');
  width: 200rpx;
  height: 160rpx;
}

2、把本地的图片base64下,直接引用这个base64后字符串

.img-background {
  url(data:image/png;base64,VCdweSsd98iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAAAAXNSR0IArs4c6QAAAHlJREFUWAnt2LEJwDAMRFE5c2ShLOKhsp69h3ISeAI1CnyBiJvA8dwcHu7+mNmrvbWdZivMHAq4dOgW7kDt65y6fiPg1AZnt8kr7haKPAgggAACfxOIskCbKdwabaaAlw0rmhaDAAIIIIBAQYA2U8CLX2kzFcB8m) no-repeat;
  width: 200rpx;
  height: 160rpx;
}

个人认为:小程序对大小有限制,可能某些背景图片会很大吧,会更容易造成超过大小限制吧,给个在线转base64

2019-02-27 13:53:24 weixin_34393428 阅读数 199
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

背景

微信小程序的测试发布在没有 CI/CD 等相关工具的情况下,存在着如下的问题:

  • 小程序开发助手中,同一个开发者只能显示一个开发版本
  • 测试同事找开发要二维码,效率较低
  • 本地生成的二维码会出现携带本地代码、未及时拉取分支其他改动等问题

为了避免如上问题的发生,采用微信小程序集成 Jenkins 的方案。
但是网上所有文档都是基于MacOS部署的,但是实际都是一样的东西。唯一不一样的就是在win10环境中使用批处理文件,还需要安装一些特定的软件:
win10下搭建Jenkins+微信开发者工具

wget,node,gitbash(可以不安装),微信web开发者工具,Jenkins

基础

在介绍实现方案之前,先来回顾一下常规的微信小程序发布流程。
win10下搭建Jenkins+微信开发者工具

从上面的流程图可以看出,微信小程序预览、上传都是需要在微信开发者工具中进行的,接下来了解一下微信开发者工具提供的上传方式。

微信开发者工具

除了图形化界面,微信开发者工具还提供了命令行与 HTTP 服务两种接口供外部调用,来进行登录、预览、上传等操作。

命令行调用

命令行工具所在位置:

macOS: <安装路径>/Contents/Resources/app.nw/bin/cli
Windows: <安装路径>/cli.bat

以 macOS 操作系统示例:

1、打开开发者工具:

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o

其中,/Applications/wechatwebdevtools.app/为安装路径。
win10下搭建Jenkins+微信开发者工具
2、登录:

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -l

输入上面的命令行后,终端中打印出登录二维码,使用微信扫码登录。在微信端完成操作之后,会输出 login success,如下图所示:
win10下搭建Jenkins+微信开发者工具

HTTP 服务

HTTP 服务在工具启动后自动开启,每次开启 host 固定为 127.0.0.1,端口号并不固定。端口号在用户目录下记录,位置如下:

macOS : ~/Library/Application Support/微信web开发者工具/Default/.ide
Windows : ~/AppData/Local/微信web开发者工具/User Data/Default/.ide

以 macOS 操作系统示例:

首先需要运行开发者工具,可以利用上面介绍的命令行方法打开微信开发者工具。

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/zyy/Library/Application Support/微信web开发者工具/Default/.ide")
echo "微信开发者工具运行在${port}端口"

这样就可以拿到微信开发者工具运行的端口号了,其中,/Users/zyy/ 为用户目录。

1、打开开发者工具:

# 打开工具
http://127.0.0.1:端口号/open
# 打开/刷新项目
http://127.0.0.1:端口号/open?projectpath=项目全路径

2、登录:

# 登录,返回图片格式的二维码
http://127.0.0.1:端口号/login
# 登录,取 base64 格式二维码
http://127.0.0.1:端口号/login?format=base64
# 登录,取 base64 格式二维码,并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/login?format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt

3、预览:

# 预览路径为 /Users/username/demo 的项目,返回图片格式的二维码
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo

# 预览路径为 /Users/username/demo 的项目,返回 base64 格式的二维码
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64

# 预览路径为 /Users/username/demo 的项目,返回 base64 格式的二维码,并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt

# 预览路径为 /Users/username/demo 的项目,返回图片格式的二维码,并将预览信息输出至 /Users/username/info.json
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&infooutput=%2Users%2username%2info.json

win10下搭建Jenkins+微信开发者工具

开始部署准备阶段

1.安装wget,node,Jenkins,gitbash,微信开发者工具

node,Jenkins去官网下载msi文件即可安装便利
wget下载后解压到D盘根路径下即可
(所有需要使用到的东西最好不要放到当前用户触碰不到的目录,否则你会哭的很惨)

2.安装gitbash并且上传公钥到代码库
#
#
win10下搭建Jenkins+微信开发者工具

3.配置Jenkins服务权限和更改环境变量(最重要的一步

打开CMD->输入services.msc
#
#
win10下搭建Jenkins+微信开发者工具
找到Jenkins 右键->属性 ->登陆
#
#

win10下搭建Jenkins+微信开发者工具
#
重启生效
#

win10下搭建Jenkins+微信开发者工具
#
#
在Jenkins系统管理——全局安全配置页面,将标记格式器在下拉列表中修改为Safe HTML然后保存,这个修改是为了在build历史记录中能够直接显示二维码图片
win10下搭建Jenkins+微信开发者工具

JAVA_OPTS
-Dsun.jnu.encoding=UTF-8 -Dfile.encoding=UTF-8

LANG
zh.CH.UTF-8

设置环境变量后重启生效(也可以不配直接写绝对路径)

Jenkins插件安装

安装下列Jenkins插件后重启:

GIT plugin
Git Parameter:获取所有分支名,作为参数列表
SSH Credentials Plugin
Git Changelog:获取Git提交log
build-name-setter
description setter plugin:在build历史记录描述信息中增加二维码显示
PostBuildScript Plugin:编译完成后执行脚本
NodeJS Plugin:小程序构建需要,在更改提交状态时使用node技术
AnsiColor
description setter :添加set build description获取图片

win10下搭建Jenkins+微信开发者工具

win10下搭建Jenkins+微信开发者工具

Jenkins项目创建

win10下搭建Jenkins+微信开发者工具
#
创建一个自由风格的项目
#
win10下搭建Jenkins+微信开发者工具
#
添加执行批处理构建,并且把如下带粘贴进去
#
win10下搭建Jenkins+微信开发者工具

#
win10下搭建Jenkins+微信开发者工具

win10下搭建Jenkins+微信开发者工具

#
<img src="http://192.168.120.191:8080/job/DEV-sk_platform_consumers_furniture-wechat/ws/${BUILD_ID}.png" alt="二维码${BUILD_ID}" width="200" height="200" /> <a href="http://192.168.120.191:8080/job/DEV-sk_platform_consumers_furniture-wechat/ws/${BUILD_ID}.png">二维码${BUILD_ID}</a&gt;;;;;;;;;;;;
#

chcp 65001     ::更改字符集
set dir=D:\ingo\Jenkins\workspace\DEV-sk_platform_consumers_furniture-wechat
set project=D:\ingo\Jenkins\workspace\DEV-sk_platform_consumers_furniture-wechat\dist
::del /F /S /Q %dir%
::rd /S /Q %dir%
git clone git@gitlab.xxxx.com:cdp/sk_platform_consumers_furniture.git %dir%
git pull git@gitlab.xxxx.com:cdp_furn/sk_platform_consumers_furniture.git
"C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o+ node_modules.rar %dir%
CALL C:\Users\xxxx\AppData\Roaming\npm\taro build --type weapp
CALL "D:\weixin\cli.bat" -o
::for /f "usebackq" %%a in (`type "C:\Windows\System32\config\systemprofile\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do @set port=%%a
::set /p port= < "C:\Windows\System32\config\systemprofile\AppData\Local\微信web开发者工具\User Data\Default\.ide"
FOR /F "usebackq delims==" %%i IN (`type "C:\Users\xxxx\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do (
    echo 当前使用端口:%%i
    set port=%%i
)
echo %port%
echo %BUILD_ID%
echo %path%

D:\wget\wget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath=%project%

win10下搭建Jenkins+微信开发者工具

优化beta2.0


chcp 65001

set dir=D:\ingo\Jenkins\workspace\DEV-sk_xxx_app-wechat\dist
set srcdir=C:\Users\xxx\Desktop\tmp  ::做清空使用,必须为空目录
set project=C:\Users\xxx\Desktop\upload-sk_xxx_app\dist-sk_xxx_app%BUILD_ID%  ::将要上传的目录放到非workspace的目录外,如果放到workspace里回提示程序有占用,影响代码更新。
set upload=C:\Users\xxx\Desktop\upload-sk_xxx_app
mkdir %project%

echo %environment%
echo %branch%
echo %describe%
echo %version%

CALL robocopy %srcdir% %WORKSPACE% /purge
echo "test success"
git clone -b %branch% git@gitlab.xxx.com:cdp_furn/sk_xxx_app.git %WORKSPACE%
git pull git@gitlab.xxx.com:cdp_furn/sk_xxx_app.git

"C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o+ node_modules.rar %WORKSPACE%
CALL node project-handle.js %environment%
CALL npm install node-sass@4.11.0
CALL npm rebuild node-sass@4.11.0
CALL C:\Users\xxxx\AppData\Roaming\npm\taro build --type weapp

CALL robocopy %dir% %project% /S
CALL "D:\weixin\cli.bat" -o
FOR /F "usebackq delims==" %%i IN (`type "C:\Users\xxx\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do (
    echo 当前使用端口:%%i
    set port=%%i
)
echo %port%
echo %BUILD_ID%
echo %path%

CALL D:\wget\wget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath=%project%

if %environment% == pro (
CALL "D:\weixin\cli.bat" -u %version%@%project% --upload-desc '%describe%'
echo "生产环境预览并上传微信小程序平台"
) ELSE (
echo "测试环境仅预览并不上传微信小程序平台"
)

win10下搭建Jenkins+微信开发者工具

win10下搭建Jenkins+微信开发者工具

win10下搭建Jenkins+微信开发者工具

优化beta3.0

beta3.0调整了变量使用,实现了可移植,复制的通用性。


chcp 65001

set dir=%WORKSPACE%\dist
set srcdir=C:\Users\xxxx\Desktop\tmp
set project=C:\Users\xxxx\Desktop\upload\%environment%-dist-%JOB_NAME%-%BUILD_ID%
set upload=C:\Users\xxxx\Desktop\upload
mkdir %project%

echo %JOB_NAME% > C:\Users\xxxx\Desktop\upload\name.txt
echo "%JOB_NAME%" | D:\Git-bash\usr\bin\awk.exe -F '-' '{print $2}'
@echo off
for /f "tokens=2 delims=-" %%l in (C:\Users\xxxx\Desktop\upload\name.txt) do ( 
echo %%l
set projectname=%%l
)

echo "projectname##%projectname%##"
echo "environment%environment%"
echo "branch##%branch%"
echo "describe##%describe%"
echo "version##%version%"

CALL robocopy %srcdir% %WORKSPACE% /purge
echo "test success"
git clone -b %branch% git@gitlab.dddd.com:cdp_furn/%projectname%.git %WORKSPACE%
git pull git@gitlab.xxxx.com:cdp_furn/%projectname%.git

"C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o+ node_modules.rar %WORKSPACE%
CALL node project-handle.js %environment%
CALL npm install node-sass@4.11.0
CALL npm rebuild node-sass@4.11.0
CALL sbtt git %environment%
CALL C:\Users\xxxx\AppData\Roaming\npm\taro build --type weapp

CALL robocopy %dir% %project% /S
CALL "D:\weixin\cli.bat" -o
FOR /F "usebackq delims==" %%i IN (`type "C:\Users\xxxx\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do (
    echo 当前使用端口:%%i
    set port=%%i
)
echo %port%
echo %BUILD_ID%
echo %path%

CALL D:\wget\wget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath=%project%

if %uploadif% == prod (
CALL "D:\weixin\cli.bat" -u %version%@%project% --upload-desc '%describe%'
echo "生产环境预览并上传微信小程序平台"
) ELSE (
echo "测试环境仅预览并不上传微信小程序平台"
)

#
构建项目时记得先登陆微信开发者工具,如果没登陆报错如下:
#
win10下搭建Jenkins+微信开发者工具
#
win10下搭建Jenkins+微信开发者工具
#
添加成员
#
注意代码里的appid是否有问题
#
#

win10下搭建Jenkins+微信开发者工具
#
#win10下搭建Jenkins+微信开发者工具

#
win10下搭建Jenkins+微信开发者工具

#
楼镇图

转载于:https://blog.51cto.com/13386520/2355545

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