2019-10-13 17:50:52 qq_26542493 阅读数 12
  • 微信公众平台深度开发v2.0第6季——微信WEB开发、手机...

    “微信公众平台深度开发Java版 v2.0”系列课程共有6季,使用JAVA语言,系统讲解微信公众平台订阅号、服务号官方列出的全部功能接口,包括:自定义菜单、个性化菜单(按需定制菜单)、群发消息、客服消息(有限次消息推送)、模板消息接(无限次消息推送)、微信网页开发(微信WEB开发、微信游戏)、微信JSSDK开发、用户管理、获取用户基本信息、网页授权获取用户基本信息(通过WEB得到用户信息)、二维码(临时二维码、永久二维码)、事件推送、接收普通消息、被动回复用户消息,等知识点。 以及,针对微信公众号开发的服务端架构设计方案。课程以微信公众号开发视角,讲解JAVA开发微信公众号所需的框架、第三方工具。 购买套餐还赠送经典微信开发课程——[微信公众号_独立知识点]环境搭建。该课程针对各种复杂的网络环境,讲解如何构建开发环境,已解决“没有服务器”、“没有固定IP”等开发者遇到的窘境。 课程采用独立知识点讲解,一个知识点,一组课程,真正做到“简单、高效、”以短的时间、实现的学习。更多课程信息请访问CSDN。网址:http://edu.csdn.net/lecturer/631 “微信公众平台企业号开发Java版”陆续上线。 详情 qq2326321088

    12240 人正在学习 去看看 翟东平

背景

最近在用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可以正常的跨场景)这个问题,容我以后再研究,有知道的小伙伴可以留言告诉我,谢谢~

2019-08-28 14:15:00 bangyang7328 阅读数 20
  • 微信公众平台深度开发v2.0第6季——微信WEB开发、手机...

    “微信公众平台深度开发Java版 v2.0”系列课程共有6季,使用JAVA语言,系统讲解微信公众平台订阅号、服务号官方列出的全部功能接口,包括:自定义菜单、个性化菜单(按需定制菜单)、群发消息、客服消息(有限次消息推送)、模板消息接(无限次消息推送)、微信网页开发(微信WEB开发、微信游戏)、微信JSSDK开发、用户管理、获取用户基本信息、网页授权获取用户基本信息(通过WEB得到用户信息)、二维码(临时二维码、永久二维码)、事件推送、接收普通消息、被动回复用户消息,等知识点。 以及,针对微信公众号开发的服务端架构设计方案。课程以微信公众号开发视角,讲解JAVA开发微信公众号所需的框架、第三方工具。 购买套餐还赠送经典微信开发课程——[微信公众号_独立知识点]环境搭建。该课程针对各种复杂的网络环境,讲解如何构建开发环境,已解决“没有服务器”、“没有固定IP”等开发者遇到的窘境。 课程采用独立知识点讲解,一个知识点,一组课程,真正做到“简单、高效、”以短的时间、实现的学习。更多课程信息请访问CSDN。网址:http://edu.csdn.net/lecturer/631 “微信公众平台企业号开发Java版”陆续上线。 详情 qq2326321088

    12240 人正在学习 去看看 翟东平

 打开微信开发者工具 创建第一个小程序

  • 步骤:

    • 打开微信开发者工具

    • 使用微信扫码登录

    • 点击小程序-创建小程序

      • 项目名

      • 项目路径

      • appid

      • 不使用云服务器

      • 语言: javascript

 截图如下:

 

微信开发者开发工具的组成

  • 菜单栏

  • 工具栏

    • 预览

      • 描述二维码

      • 自动预览

    • 切后台

  • 模拟器

  • 编译器

  • 调试器

 目录结构:

    

 

1.项目结构

  • 对比:

    • web页面:

      • 技术栈:

        • html

          • 从语义化的角度来描述页面结构

        • css

          • 从审美的角度来美化页面

        • js

          • 从交互的角度来提升用户体验

    • 小程序页面

      • 技术栈:

        • wxml

          • 描述微信页面的结构

        • wxss

          • 描述微信页面的样式

        • js

          • 书写微信的逻辑代码

        • json

          • 配置页面的相关信息

  • 组成

    • pages:管理当前小程序中所有的页面

      • index

        • index.wml

        • index.js

          • 注意点:

            • 所有的代码都是写在

              Page({
               
              })
        • index.wxss

        • index.json

          • 注意点:

            • 如果没有内容,必须添加一个空对象

    • app.json:注册小程序中的页面

  • 小技巧
    • 快速创建一个页面

      • 在 app.json 中的 pages 下添加一个路径,直接保存,可以自动生成对应的页面

    • 设置项目的默认首页

      • 在 app.json 中的 pages 将路径移到第一个元素中










转载于:https://www.cnblogs.com/KoBe-bk/p/11423765.html

2020-01-04 20:24:47 super828 阅读数 23
  • 微信公众平台深度开发v2.0第6季——微信WEB开发、手机...

    “微信公众平台深度开发Java版 v2.0”系列课程共有6季,使用JAVA语言,系统讲解微信公众平台订阅号、服务号官方列出的全部功能接口,包括:自定义菜单、个性化菜单(按需定制菜单)、群发消息、客服消息(有限次消息推送)、模板消息接(无限次消息推送)、微信网页开发(微信WEB开发、微信游戏)、微信JSSDK开发、用户管理、获取用户基本信息、网页授权获取用户基本信息(通过WEB得到用户信息)、二维码(临时二维码、永久二维码)、事件推送、接收普通消息、被动回复用户消息,等知识点。 以及,针对微信公众号开发的服务端架构设计方案。课程以微信公众号开发视角,讲解JAVA开发微信公众号所需的框架、第三方工具。 购买套餐还赠送经典微信开发课程——[微信公众号_独立知识点]环境搭建。该课程针对各种复杂的网络环境,讲解如何构建开发环境,已解决“没有服务器”、“没有固定IP”等开发者遇到的窘境。 课程采用独立知识点讲解,一个知识点,一组课程,真正做到“简单、高效、”以短的时间、实现的学习。更多课程信息请访问CSDN。网址:http://edu.csdn.net/lecturer/631 “微信公众平台企业号开发Java版”陆续上线。 详情 qq2326321088

    12240 人正在学习 去看看 翟东平

学习交流可以添加

微信读者交流①群 (添加微信:coderAllen,备注加群)
程序员技术交流①群:736386324


注册只有就是下载开发者工具,还是登陆腾讯的官网,https://mp.weixin.qq.com
注意下右上角,需要的很多文档和工具都是在这里
在这里插入图片描述

进入文档会发现开发文档做的非常全了,最好的手册永远是官方手册
在这里插入图片描述

选择开发这个按钮,左下角是下载的选项
在这里插入图片描述
这里根据自己的电脑选择就可以了,我就直接下载win64位
在这里插入图片描述

后边直接安装就好
在这里插入图片描述
在这里插入图片描述
搞定
在这里插入图片描述

登录需要使用注册的微信号
在这里插入图片描述

安装步骤结束
在这里插入图片描述

2017-06-30 14:34:10 u012848631 阅读数 3111
  • 微信公众平台深度开发v2.0第6季——微信WEB开发、手机...

    “微信公众平台深度开发Java版 v2.0”系列课程共有6季,使用JAVA语言,系统讲解微信公众平台订阅号、服务号官方列出的全部功能接口,包括:自定义菜单、个性化菜单(按需定制菜单)、群发消息、客服消息(有限次消息推送)、模板消息接(无限次消息推送)、微信网页开发(微信WEB开发、微信游戏)、微信JSSDK开发、用户管理、获取用户基本信息、网页授权获取用户基本信息(通过WEB得到用户信息)、二维码(临时二维码、永久二维码)、事件推送、接收普通消息、被动回复用户消息,等知识点。 以及,针对微信公众号开发的服务端架构设计方案。课程以微信公众号开发视角,讲解JAVA开发微信公众号所需的框架、第三方工具。 购买套餐还赠送经典微信开发课程——[微信公众号_独立知识点]环境搭建。该课程针对各种复杂的网络环境,讲解如何构建开发环境,已解决“没有服务器”、“没有固定IP”等开发者遇到的窘境。 课程采用独立知识点讲解,一个知识点,一组课程,真正做到“简单、高效、”以短的时间、实现的学习。更多课程信息请访问CSDN。网址:http://edu.csdn.net/lecturer/631 “微信公众平台企业号开发Java版”陆续上线。 详情 qq2326321088

    12240 人正在学习 去看看 翟东平

摘要:本文介绍了微信小程序的开发者工具、微信小程序使用的基本前后端框架

1.简介

为了鼓励广大程序员跳入微信小程序开发这个大坑,腾讯很贴心地提供了微信小程序开发框架以及灰常详细的开发文档(点这里),文档言简意赅清晰易懂,读完令人如沐春风,赞一个。我读了两遍就打算开始正式开发了,有意向专攻这方面开发的同学可以多读两遍。

总体来说,微信小程序遵循传统前端框架开发界面,后端服务器语言提供基础支持的模式。开发还是非常容易的。

基本的开发步骤为这样:
1、配置开发环境,只要下载开发者工具(点这里)就可以了。安装开发者工具以后,使用微信扫码登录,自行填写下面的条目。关于AppID这一栏,如果App需要在应用里上线的话,需要去官方申请,如果只是体验一下的话,可以不用填AppID,直接点旁边的”无AppID”就可以了。
这里写图片描述

在开发者工具创建项目时会提示,是否需要创建一个 quick start 项目。选择“是”,会自动生成一个简单的原始模型。

  1. 点击左边的编辑,里面含有整个Project的文件结构。具体来说,
    小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
    这里写图片描述

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

文件类型 必填 作用
app.js 小程序逻辑
app.json 小程序公共设置
app.wxss 小程序的css样式表

每个单独的小程序页面由四个文件组成,分别是:

文件类型 必填 作用
js 页面逻辑
wxml 页面结构
wxss 页面样式表
json 页面配置

这两个表格内的文件,就是小程序运行的所有组件。具体的内容,根据详细的开发框架,完成需要制作的程序即可。

点击左侧的”项目”,再点击预览,扫码后即可在微信客户端中体验小程序在手机端运行的效果。

这里写图片描述

2. 框架分析

根据小程序官方文档的介绍,框架的核心为两块视图层和一个逻辑层。
1. 视图层使用微信自行开发的的WXML和WXSS语言开发,基本可以看做是XML和CSS的缩小版。
2. 逻辑层使用JavaScript开发,提供一系列数据绑定、传输和事件系统。
听到这里我赶紧把三年前买的书从书架上拿出来,把上面的灰尘擦干净,压压惊。
这里写图片描述

我记得从前有为架构师说过,凡是能用JS开发的软件折腾到最后都会用JS开发。说这句话的人具体是谁?管他呢!

另外,官方文档也提供了一大堆设计标准、组件、视图中的基础部件、快捷调用手机硬件功能的API,比如用户信息,本地存储,支付功能等等,总之,用最简单的方法让程序员快速、流畅地开发软件,看起来小程序还是做到了。

2017-01-25 16:24:39 qlzg5200 阅读数 25930
  • 微信公众平台深度开发v2.0第6季——微信WEB开发、手机...

    “微信公众平台深度开发Java版 v2.0”系列课程共有6季,使用JAVA语言,系统讲解微信公众平台订阅号、服务号官方列出的全部功能接口,包括:自定义菜单、个性化菜单(按需定制菜单)、群发消息、客服消息(有限次消息推送)、模板消息接(无限次消息推送)、微信网页开发(微信WEB开发、微信游戏)、微信JSSDK开发、用户管理、获取用户基本信息、网页授权获取用户基本信息(通过WEB得到用户信息)、二维码(临时二维码、永久二维码)、事件推送、接收普通消息、被动回复用户消息,等知识点。 以及,针对微信公众号开发的服务端架构设计方案。课程以微信公众号开发视角,讲解JAVA开发微信公众号所需的框架、第三方工具。 购买套餐还赠送经典微信开发课程——[微信公众号_独立知识点]环境搭建。该课程针对各种复杂的网络环境,讲解如何构建开发环境,已解决“没有服务器”、“没有固定IP”等开发者遇到的窘境。 课程采用独立知识点讲解,一个知识点,一组课程,真正做到“简单、高效、”以短的时间、实现的学习。更多课程信息请访问CSDN。网址:http://edu.csdn.net/lecturer/631 “微信公众平台企业号开发Java版”陆续上线。 详情 qq2326321088

    12240 人正在学习 去看看 翟东平

今天刚刚看完了一下微信小程序文档,觉得很有意思,于是自己就写了一个小程序,首先说明我是做.net   的,今天所有的数据都是用VS写的数据,iis作为服务器进行简单数据传输,先看一下效果图片:



可以看到这个小程序界面也很简单,顶部是类似js的一个动画图片轮播,下面是列表,底部是导航菜单,接下来我们就一步步完成一下这个


1.准备工作,用visual studio写后台数据

首先用vs2013建立一个基本的mvc模板,包括model、Controllers和view,但是今天我们的项目和view没关系,是可以删除的,首先写一个json类,用于把控制器中的值变为json格式:代码如下

 

 public static class Json
    {
        public static object ToJson(this string Json)
        {
            return Json == null ? null : JsonConvert.DeserializeObject(Json);
        }
        public static string ToJson(this object obj)
        {
            var timeConverter = new IsoDateTimeConverter { DateTimeFormat = "yyyy-MM-dd HH:mm:ss" };
            return JsonConvert.SerializeObject(obj, timeConverter);
        }
        public static string ToJson(this object obj, string datetimeformats)
        {
            var timeConverter = new IsoDateTimeConverter { DateTimeFormat = datetimeformats };
            return JsonConvert.SerializeObject(obj, timeConverter);
        }
        public static T ToObject<T>(this string Json)
        {
            return Json == null ? default(T) : JsonConvert.DeserializeObject<T>(Json);
        }
        public static List<T> ToList<T>(this string Json)
        {
            return Json == null ? null : JsonConvert.DeserializeObject<List<T>>(Json);
        }
        public static DataTable ToTable(this string Json)
        {
            return Json == null ? null : JsonConvert.DeserializeObject<DataTable>(Json);
        }
        public static JObject ToJObject(this string Json)
        {
            return Json == null ? JObject.Parse("{}") : JObject.Parse(Json.Replace(" ", ""));
        }
    }


还需要写一个专门返回的类型AjaxResult类型和枚举,代码如下

 public class AjaxResult
    {
        /// <summary>
        /// 操作结果类型
        /// </summary>
        public object state { get; set; }
        /// <summary>
        /// 获取 消息内容
        /// </summary>
        public string message { get; set; }
        /// <summary>
        /// 获取 返回数据
        /// </summary>
        public object data { get; set; }
    }
    /// <summary>
    /// 表示 ajax 操作结果类型的枚举
    /// </summary>
    public enum ResultType
    {
        /// <summary>
        /// 消息结果类型
        /// </summary>
        info = 0,


        /// <summary>
        /// 成功结果类型
        /// </summary>
        success = 1,


        /// <summary>
        /// 警告结果类型
        /// </summary>
        warning = 2,


        /// <summary>
        /// 异常结果类型
        /// </summary>
        error = 3
    }


接下来在Controllers中写上简单的测试数据,如图所示写一个Progream类



在控制器中写一个一个方法,转换为json数据,如图




把这个数据发布到iis中,直接访问/Home/getProgream,可以看到如图所示的数据



可以看到这个里面Images这个数据中用的是http://localhost:88这个端口的数据,这个是我提前发布在iis中的的项目的图片,如图随便访问一张图片都可以打开对应的图片数据



把这个分为三部分,wxml代码如下

<!--pages/board/board.wxml-->
<view class="container">
  <view class="slide">
    <!--动画轮播 swiper
   indicator-dots是否显示轮播点,默认false
   autoplay是否自动轮播
   interval间隔时间
   duration轮播一次多长时间-->
    <swiper indicator-dots="true" autoplay="true" interval="2000" duration="1000">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image mode="aspectFill" src="{{item.Images}}" class="slide-image" width="355" height="150" />
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="board" wx:for="{{imgUrls}}">
  <navigator url="../list/list?name={{item.Name}}">
   <view class="board-item" hover-class="none">
      <text>{{item.Name}}</text>
      <image src="../../Images/arrowright.png" mode="aspectFill"></image>
    </view>
    </navigator>
    </view>
</view>

wxss样式代码如下

/* pages/board/board.wxss */
.slide slide{
    height: 400rpx;
}
.slide-image{
    width: 100%;
    height: 100%;
}
.board{
    display: flex;
    flex-direction:column;
    padding: 30rpx; 
}
.board-item{
    display: flex;
    flex: 1;
    cursor:pointer;
    border: 1rpx solid #eee;
    margin-top: 10rpx;
    padding: 30rpx;
}
.board-item text{
    flex: 1;
    width:50rpx;
    height: 40rpx;
}
.board-item image{   
    width:30rpx;
    height: 30rpx;
}


js代码如下

// pages/board/board.js
var app = getApp()
Page({
  data:{
    imgUrls:[]
  },
  onLoad:function(options){
    var _this=this;
    // 页面初始化 options为页面跳转所带来的参数
   wx.request({
     url: 'http://localhost/Home/getProgream?key=123',
     method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
     // header: {}, // 设置请求的 header
     success: function(res){
       console.log(res.data.data);
       // success
       _this.setData({
         imgUrls:res.data.data
         });
     },




     fail: function() {
       // fail
     },
     complete: function() {
       // complete
     }
   })


  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

主要考察的是 wx.request的用法,这个和ajax用法一样,这里的url我传的就是http://localhost/home/getProgream?key=123

底部导航菜单在最外层app.js中注册配置

配置代码如下:

{
  "pages":[
     "pages/lianxi/lianxi",
    "pages/board/board",
    "pages/list/list",
    "pages/item/item",
   "pages/search/search"
  
    
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#35495e",
    "navigationBarTitleText": "编程语言",
    "navigationBarTextStyle":"white"
  },
  
  "tabBar": {
    "color": "#ccc",
    "selectedColor": "#000",
    "borderStyle": "balck",
    "backgroundColor": "#ffffff",
    "list": [
    {
      "text": "程序列表",
      "pagePath": "pages/board/board",
      "iconPath":"images/antivirus.png",
      "selectedIconPath":"images/antivirus.png"
    }, 
    {
      "pagePath": "pages/search/search",
      "text": "查看",
      "iconPath":"images/view.png",
      "selectedIconPath":"images/view.png"
    },
    {
      "pagePath": "pages/list/list",
      "text": "友情链接",
      "iconPath":"images/insert-hyperlink.png",
      "selectedIconPath":"images/insert-hyperlink.png"
    },
    {
      "pagePath":  "pages/lianxi/lianxi",
      "text": "联系我们",
      "iconPath":"images/about-me.png",
      "selectedIconPath":"images/about-me.png"
    }
    
    ]
  },
  "dubug":"true"


}


因为涉及两个语言,这里就不传代码了,咨询信息见如图:












微信开发本地调试

阅读数 2415

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