热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

关于高仿QQ的微信小程序的详解

这篇文章主要写我在SmallAppForQQ这个项目进展的过程中遇到的一些问题。希望阅读此文对你有一定帮助。
这篇文章主要写我在SmallAppForQQ这个项目进展的过程中遇到的一些问题。希望阅读此文对你有一定帮助。

SmallAppForQQ:一个访QQ的微信小程序

文章开头,先简单介绍下项目结构,若没有安装开发工具,可去

github.com/xiehui999/SmallAppForQQ

下载。微信小程序项目结构主要有四个文件类型,如下——

1)WXML文件:(Weixin Markup Language)是微信在前人基础之上设计的一套描述式标签语言,用于构建小程序的视图。

2)WXSS文件:(WeiXin Style Sheets)是一套样式语言,用于描wxml中视图组件的样式,

3)js文件:业务逻辑处理,与后端进行数据交互等

4)json文件:小程序设置文件,如页面注册,页面标题等。

注意:为了方便开发者减少配置项,规定描述页面的这四个文件必须具有相同的路径与文件名。

app.json

这个文件,在根目录下,是程序入口文件。

必须要有这个文件,如果没有这个文件,项目无法运行,因为微信框架把这个作为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window背景色等。

app.js

必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写

以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.wxss

全局配置的样式文件,项目非必须。

知道小程序基本文件结构,就可以开始研究官方demo了,研究过程中如果有不明白的地方可以去官方文档寻求答案。下面介绍下出现概率较高的几个问题——

常见问题rpx(responsive pixel)

微信小程序新定义了一个尺寸单位,可以适配不同分辨率的屏幕,它规定屏幕宽为750rpx,如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

(rpx并不是微信新定义的尺寸单位,在之前移动开发中便有,微信是兼收了众家之长,在前人基础之上定义了一个小程序开发框架。和苹果一样,苹果在开放AppStore时使用Objective-C作为App的开发语言,但是OC并不是苹果发明的。)

这个项目我用的都是rpx尺寸单位,期间遇到一个很奇葩的问题。在相邻的两条信息直接都会有一个分割线,我将线的高度都设置成1rpx,但是不有个别分割线是不显示的,如下图

看到没在第一条和第二条直接并没有现实这条线,但是其他的都展示了,分割线的属性是一样的,而且在不同的手机上(分辨率不同)不显示的分割线也是不同的,有的分辨率好几条分割线都不显示,不知道这是模拟器的bug还是rpx的bug。最后分割线的高度尺寸单位使用了px,解决了这个问题。(不妨布局使用rpx,装饰样式使用px,尚未得到实践验正。)

40013错误

在微信小程序刚出来的时候如果输入AppID提示这个信息就表示没有破解,但是现在官方软件更新可以选择无AppID开发,如下图,我们之间选择无AppID,即可解决此错误。建议安装官方开发工具。可去此处找下载链接。

(目前个人开发者也能申请小程序,appId不再稀缺,无此麻烦)

-4058错误(缺少app.json文件)

微信小程序创建项目时选择无AppID,创建项目时会生成app.json,app.josn是程序启动最重要的文件,程序的页面注册,窗口设置,tab设置及网络请求时间设置都是在此文件下的。如果你创建的项目目录下没有app.json文件就会报下面的错误。

我们看到上面的错误信息中有个数字-4058,这应该是初入微信小程序遇到最多的错误了,这种一般都是文件缺失,后面有个path,可以对着该路径看看是否存在这个文件。造成这种错误的原因一般都是创建项目选择的目录不正确,或者在app.json注册了一个不存在的页面。

当然还有一种情况就是在app.json文件的pages注册的页面是没有创建的,或者你删除了某个页面,但是没有取消注册也会是-4058错误。

Page注册错误

这个错误可能很容易理解,页面注册错误。页面是通过Page对象来渲染的,每个页面对应的js文件必须要创建page,最简单的方式就是在js文件下写入Page({}),在page中有管理页面渲染的生命周期,以及数据处理,事件都在这完成。这个错误引起的原因一般都是刚创建页面,js文件还有有处理或者忘了处理。所以要养成创建页面的同时在js文件先创建Page的习惯.

Page route错误

字面意思就是页面路由错误,在微信中有两种路由方式一种是在wxml文件使用组件,一种是调用wx.navigateTo。

如下代码——

wxml:

搜索

js:

bindtap:function(e){
wx.navigateTo({
url:"search/search"})
}

如果你这样写的话,恭喜你,你就会看到上面提示的错误,这是因为重复调用路由引起的,处理方法就是删除一个路由,删除组件或者删除wx.navigateTo。除了上面说的可能导致路由错误外,还有一种情况,类似于下面的代码

搜索

这种也是不允许的,也就是说navigator组件内部不能再嵌套组件navigator。

Do not have * handler in current page.

大概意思就是当前页面没有此处理,让确定是否已经定义,还指出了错误出现的可能位置pages/message/message,其实这种问题出现一般就是我们在wxml定义了一些处理事件,但是在js文件中没有实现这个时事件的处理方法,就会出现这个错误。那么我们按提示在js文件加上事件处理,如下代码,加上后就不会再有此错误提示。

bindtap:function(e){
wx.navigateTo({
url:"search/search"})
},

tabBar设置不显示

对于tabBar不显示,原因有很多,查找这个错误直接去app.json这个文件,最常见的也是刚学习微信小程序最容易犯的错误无外乎下面几种——

注册页面即将页面写到app.json的pages字段中,如

"pages":["pages/message/message","pages/contact/contact","pages/dynamic/dynamic","pages/dynamic/music/music","pages/index/index","pages/logs/logs"]

1、tabBar写法错误导致的不显示,将其中的大写字母B写成小写,导致tabBar不显示。

2、tabBar的list中没有写pagePath字段,或者pagePath中的页面没有注册

3、tabBar的list的pagePath指定的页面没有写在注册页面第一个。微信小程序的逻辑是"pages"中的第一个页面是首4、页,也就是程序启动后第一个显示的页面,如果tabBar的list的pagePath指定的页面都不是pages的第一个,当然也就不会电视tabBar了。

5、tabBar的数量低于两项或者高于五项,微信官方中明确规定tabBar的至少两项最多五项。超过或者少于都不会显示tabBar。

navigationBarTitle显示问题

通过这个动态图你应该发现问题了,当点击音乐进入音乐界面时,title先显示了WeChatForQQ然后显示的音乐,这个体验肯定是难以接受的,原因是音乐界面的title是在js文件中page的生命周期方法中设置的。

若你不了解生命周期,可以点击查看

Page({
data:{// text:"这是一个页面"},
onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},
onReady:function(){// 页面渲染完成//NavigationBarTitle如果此处和json文件都设置,最后展示此处的标题栏wx.setNavigationBarTitle({
title:'音乐'})
},
onShow:function(){// 页面显示},
onHide:function(){// 页面隐藏},
onUnload:function(){// 页面关闭}
})

通过注释你应该明白了,设置标题写在了onReady方法中,也就是页面已经渲染完成了,在onReady之前显示的title就是json文件(覆盖关系,如果在子页面json文件设置title会覆盖app.json全局设置)中的title。可能你会说将wx.setNavigationBarTitle写在onLoad函数中,不过如果这样设置是不对的,因为onLoad执行过后才渲染页面,在渲染页面时title会从json文件中读取,导致onLoad设置的title会只在页面渲染之前展示,之后就显示json文件的tile,所以现在你应该明白ttle设置最优的地方就是给子文件写一个json文件,在文件中写入,如果想改变颜色直接在文件中添加就可以,该文件所写的属性值会覆盖app.json中设置的值。

{
"navigationBarTitleText":"音乐"}

窗口的标题取决于三处:

1,app.json中的App标题设置

2,page同名json文件中的标题设置

3,js代码通过wx.setNavigationBarTitle接口设置

如果标题是静态的,通过2设置。如果窗口本身是动态的,标题取决于传进来的参数,比例id,那么最好把1中的navigationBarTitleText设置为空,然后在js中动置。注意,空的设置,会影响所有页面。

wx.navigateTo无法打开页面

一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面。请避免多层级的交互方式,或者使用wx.redirectTo。

简单一点,推荐使用wx.redirectTo,然后开发小程序单页应用,单页应用,就像以前pc网站洪荒时期的单页网站。

关于wx.navigateTo5个页面的打开限制,有没有解决的工具或方案?

navigateTo限制为五层,其实就是规定了页面栈中的元素不能超过五个。页面栈中元素达到五个后,就不能增加了。关于小程序页面栈的详细说明,详细请看这篇:

www.ifanr.com/minapp/744601

该文并没有给出解决的方法。码农于此处给出一个理论方案:

1,每次跳转都使用redirectTo,并且只在js中使用。在wxml中使用,也是通过先绑定事件,在事件

函数中使用。

2,自已实现一个页面栈,每次跳转之前,先推进这个自定义的页面栈。

3,不使用wx.navigateBack,从自定义页面栈中取出一个页面,redirectTo

这样就实现了无级跳转。小程序官方的机制,适用于简单的、层级不多的场景。使用如上自定义栈,好处还有减少内存占用,因为永远都是redirectTo。

本地资源无法通过 css 获取

background-image:可以使用网络图片,或者 base64,或者使用标签。

页面间数据传递

微信小程序路由(页面跳转)是通过API wx.navigateTo或者wxml中组件实现的,不管哪种实现都会有一个重要的参数就是url,它指定了要跳转的页面,并且页面之间数据传递也是通过url来实现的,这个数据传递有点类似于我们使用的get网络请求,把参数都拼接在要跳转界面地址的后面并以“?”连接。然后将要传入的数据以键和值的形式追加在"?"后面,多个参数直接用"&"符合。如我们点击消息聊天记录,将列表上的数据传到下一个页面,可以这样写。

{{item.title}}
{{item.message}}
{{item.time}}
0}}">{{item.count}}

而数据接收是在js文件的page里接收的,page生命周期有一个onLoad函数,它就是做一些初始化数据的工作,onLoad函数有一个参数options,我们就可以通过key将数据获取,如下

Page({
data:{// text:"这是一个页面"isHiddenToast:true
}
onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数console.log(options.title)console.log(options.message)
},
onReady:function(){// 页面渲染完成},
onShow:function(){// 页面显示},
onHide:function(){// 页面隐藏},
onUnload:function(){// 页面关闭},
bindtap:function(event){
wx.navigateTo({
url:"/pages/message/search/search"})
},
})

这样就实现了页面间数据传递功能。

另外,听说支付宝也开始搞小程序了,连IDE都很像微信小程序开发工具:



文档页:


从“小程序”这个名字来看,因为“程序”是通用名词,而“小”本身没有独特性,所以任何公司申请“小程序”商标估计都难以获得商标管理局的通过,这也就意味着任何公司都可以做自己的“小程序”平台。

以上就是关于高仿QQ的微信小程序的详解的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 使用Echarts for Weixin 小程序实现中国地图及区域点击事件
    本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]
  • 深入解析微信小程序开发中的全局配置文件设置与优化技巧
    本文深入探讨了微信小程序开发中全局配置文件的设置与优化技巧,详细解析了 `app.js`、`app.json`、`app.wxss` 和 `project.config.json` 的功能与最佳实践。通过合理配置这些文件,开发者可以显著提升小程序的性能和用户体验。文章还介绍了如何利用这些配置文件进行模块化开发和调试,帮助开发者更好地管理和维护小程序项目。 ... [详细]
  • 微信小程序开发指南:创建动态电影选座界面
    本文详细介绍如何在微信小程序中实现一个动态且可视化的电影选座组件,提高用户体验。通过合理的布局和交互设计,使用户能够轻松选择心仪的座位。 ... [详细]
  • 小程序的授权和登陆
    小程序的授权和登陆 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • HTML:  将文件拖拽到此区域 ... [详细]
  • HTML前端开发:UINavigationController与页面间数据传递详解
    本文详细介绍了如何在HTML前端开发中利用UINavigationController进行页面管理和数据传递,适合初学者和有一定基础的开发者学习。 ... [详细]
  • 如何处理PHP缺少扩展的问题
    本文将详细介绍如何解决PHP环境中缺少扩展的问题,包括检查当前环境、修改配置文件以及验证修改是否生效的具体步骤,帮助开发者更好地管理和使用PHP扩展。 ... [详细]
  • Java中的引用类型详解
    本文详细介绍了Java中的引用类型,包括强引用、软引用、弱引用和虚引用的特点和应用场景。 ... [详细]
  • 本文讲述了一位80后的普通男性程序员,尽管没有高学历,但通过不断的努力和学习,在IT行业中逐渐找到了自己的位置。从最初的仓库管理员到现在的多技能开发者,他的职业生涯充满了挑战与机遇。 ... [详细]
  • 2022年2月 微信小程序 app.json 配置详解:启用调试模式
    本文将详细介绍如何在微信小程序的 app.json 文件中启用调试模式(debug),并通过实际案例展示其配置方法和应用场景。 ... [详细]
  • DVWA学习笔记系列:深入理解CSRF攻击机制
    DVWA学习笔记系列:深入理解CSRF攻击机制 ... [详细]
  • JVM参数设置与命令行工具详解
    JVM参数配置与命令行工具的深入解析旨在优化系统性能,通过合理设置JVM参数,确保在高吞吐量的前提下,有效减少垃圾回收(GC)的频率,进而降低系统停顿时间,提升服务的稳定性和响应速度。此外,本文还将详细介绍常用的JVM命令行工具,帮助开发者更好地监控和调优JVM运行状态。 ... [详细]
author-avatar
手机用户2702933940
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有