2023年7月2日发(作者：)

微信⼩程序初步学习及遇到的问题（⼀）微信⼩程序初步学习及遇到的问题（⼀）最近新来的⼏个实习⽣在学微信开发，问题⽐较多，闲来结合⽹上以及他们纠结的⼏个点总结了⼀点内容，时间仓促，后⾯继续加更。⼀：项⽬结构微信⼩程序项⽬结构主要有四个⽂件类型,如下**WXML （WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出页⾯的结构。内部主要是微信⾃⼰定义的⼀套组件。WXSS (WeiXin Style Sheets)是⼀套样式语⾔，⽤于描述 WXML 的组件样式，js 逻辑处理，⽹络请求json ⼩程序设置，如页⾯注册，页⾯标题及tabBar。注意：为了⽅便开发者减少配置项，规定描述页⾯的这四个⽂件必须具有相同的路径与⽂件名。在根⽬录下⽤app来命名的这四中类型的⽂件，就是程序⼊⼝⽂件。必须要有这个⽂件，如果没有这个⽂件，项⽬⽆法运⾏，因为微信框架把这个作为配置⽂件⼊⼝，整个⼩程序的全局配置。包括页⾯注册，⽹络设置，以及⼩程序的window背景⾊，配置导航条样式，配置默认标题。必须要有这个⽂件，没有也是会报错！但是这个⽂件创建⼀下就⾏ 什么都不需要写以后我们可以在这个⽂件中监听并处理⼩程序的⽣命周期函数、声明全局变量。全局配置的样式⽂件，项⽬⾮必须。⼆：常见问题rpx（responsive pixel）微信⼩程序新定义了⼀个尺⼨单位，可以适配不同分辨率的屏幕，它规定屏幕宽为750rpx，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。这个项⽬我⽤的都是rpx尺⼨单位，期间遇到⼀个很奇葩的问题。在相邻的两条信息直接都会有⼀个分割线，我将线的⾼度都设置成1rpx,但是不有个别分割线是不显⽰的，如下图看到没在第⼀条和第⼆条直接并没有现实这条线，但是其他的都展⽰了，分割线的属性是⼀样的，⽽且在不同的⼿机上（分辨率不同）不显⽰的分割线也是不同的，有的分辨率好⼏条分割线都不显⽰，不知道这是模拟器的bug还是rpx的bug。最后分割线的⾼度尺⼨单位使⽤了px,解决了这个问题。40013错误在微信⼩程序刚出来的时候如果输⼊AppID提⽰这个信息就表⽰没有破解，但是现在官⽅软件更新可以选择⽆AppID开发，如下图，我们之间选择⽆AppID，即可解决此错误。建议安装官⽅开发⼯具。可去此处找下载链接。4058错误微信⼩程序创建项⽬时选择⽆AppID，创建项⽬时会⽣成，是程序启动最重要的⽂件，程序的页⾯注册，窗⼝设置，tab设置及⽹络请求时间设置都是在此⽂件下的。如果你创建的项⽬⽬录下没有⽂件就会报下⾯的错误。我们看到上⾯的错误信息中有个数字-4058，这应该是初⼊微信⼩程序遇到最多的错误了，这种⼀般都是⽂件缺失，后⾯有个path，可以对着该路径看看是否存在这个⽂件。造成这种错误的原因⼀般都是创建项⽬选择的⽬录不正确，或者在注册了⼀个不存在的页⾯。当然还有⼀种情况就是在⽂件的pages注册的页⾯是没有创建的，或者你删除了某个页⾯，但是没有取消注册也会是-4058错误。Page注册错误这个错误可能很容易理解，页⾯注册错误。页⾯是通过Page对象来渲染的，每个页⾯对应的js⽂件必须要创建page，最简单的⽅式就是在js⽂件下写⼊Page({})，在page中有管理页⾯渲染的⽣命周期，以及数据处理，事件都在这完成。这个错误引起的原因⼀般都是刚创建页⾯，js⽂件还有有处理或者忘了处理。所以要养成创建页⾯的同时在js⽂件先创建Page的习惯.Page route错误字⾯意思就是页⾯路由错误，在微信中有两种路由⽅式⼀种是在wxml⽂件使⽤如下代码：wxml⽂件：js⽂件事件处理函数：bindtap:function(event){teTo({url: “search/search”})}如果你这样写的话，恭喜你，你就会看到上⾯提⽰的错误，这是因为重复调⽤路由引起的，处理⽅法就是删除⼀个路由，删除 搜索这种也是不允许的，也就是说Do not have * handler in current page.⼤概意思就是当前页⾯没有此处理，让确定是否已经定义，还指出了错误出现的可能位置pages/message/message,其实这种问题出现⼀般就是我们在wxml定义了⼀些处理事件，但是在js⽂件中没有实现这个时事件的处理⽅法，就会出现这个错误。那么我们按提⽰在js⽂件加上事件处理，如下代码，加上后就不会再有此错误提⽰。 bindtap:function(event){ teTo({ url: "search/search" }) },tabBar设置不显⽰对于tabBar不显⽰，原因有很多，查找这个错误直接去这个⽂件，最常见的也是刚学习微信⼩程序最容易犯的错误⽆外乎下⾯⼏种注册页⾯即将页⾯写到的pages字段中，如 "pages":[ "pages/message/message", "pages/contact/contact", "pages/dynamic/dynamic", "pages/dynamic/music/music", "pages/index/index", "pages/logs/logs" ]tabBar写法错误导致的不显⽰，将其中的⼤写字母B写成⼩写，导致tabBar不显⽰。tabBar的list中没有写pagePath字段，或者pagePath中的页⾯没有注册tabBar的list的pagePath指定的页⾯没有写在注册页⾯第⼀个。微信⼩程序的逻辑是"pages"中的第⼀个页⾯是⾸页，也就是程序启动后第⼀个显⽰的页⾯，如果tabBar的list的pagePath指定的页⾯都不是pages的第⼀个，当然也就不会电视tabBar了。tabBar的数量低于两项或者⾼于五项，微信官⽅中明确规定tabBar的⾄少两项最多五项。超过或者少于都不会显⽰tabBar。navigationBarTitle显⽰问题通过这个动态图你应该发现问题了，当点击⾳乐进⼊⾳乐界⾯时，title先显⽰了WeChatForQQ然后显⽰的⾳乐，这个体验肯定是难以接受的，原因是⾳乐界⾯的title是在js⽂件中page的⽣命周期⽅法中设置的。若你不了解⽣命周期，可以点击查看Page({data:{// text:“这是⼀个页⾯”},onLoad:function(options){// 页⾯初始化 options为页⾯跳转所带来的参数 }, onReady:function(){ // 页⾯渲染完成 //NavigationBarTitle如果此处和json⽂件都设置，最后展⽰此处的标题栏igationBarTitle({ title: '⾳乐'}) }, onShow:function(){ // 页⾯显⽰ }, onHide:function(){ // 页⾯隐藏 }, onUnload:function(){ // 页⾯关闭 }})通过注释你应该明⽩了，设置标题写在了onReady⽅法中，也就是页⾯已经渲染完成了，在onReady之前显⽰的title就是json⽂件（覆盖关系，如果在⼦页⾯json⽂件设置title会覆盖全局设置）中的title。可能你会说将igationBarTitle写在onLoad函数中，不过如果这样设置是不对的，因为onLoad执⾏过后才渲染页⾯，在渲染页⾯时title会从json⽂件中读取，导致onLoad设置的title会只在页⾯渲染之前展⽰，之后就显⽰json⽂件的tile，所以现在你应该明⽩ttle设置最优的地⽅就是给⼦⽂件写⼀个json⽂件，在⽂件中写⼊，如果想改变颜⾊直接在⽂件中添加就可以，该⽂件所写的属性值会覆盖中设置的值。{“navigationBarTitleText”: “⾳乐”}teTo⽆法打开页⾯⼀个应⽤同时只能打开5个页⾯，当已经打开了5个页⾯之后，teTo不能正常打开新页⾯。请避免多层级的交互⽅式，或者使⽤ctTo本地资源⽆法通过 css 获取background-image：可以使⽤⽹络图⽚，或者 base64，或者使⽤标签页⾯间数据传递微信⼩程序路由（页⾯跳转）是通过API teTo或者wxml中 {{}} {{e}} {{}} {{}} ⽽数据接收是在js⽂件的page⾥接收的，page⽣命周期有⼀个onLoad函数，它就是做⼀些初始化数据的⼯作，onLoad函数有⼀个参数options，我们就可以通过key将数据获取，如下Page({data:{// text:“这是⼀个页⾯”isHiddenToast:true}onLoad:function(options){// 页⾯初始化 options为页⾯跳转所带来的参数()(e)},onReady:function(){// 页⾯渲染完成},onShow:function(){// 页⾯显⽰},onHide:function(){// 页⾯隐藏},onUnload:function(){// 页⾯关闭},bindtap:function(event){teTo({url: “/pages/message/search/search”})},})这样就实现了页⾯间数据传递功能。#### 怎么封装微信⼩程序的数据请求的？1.将所有的接⼝放在统⼀的js⽂件中并导出；2.在中创建封装请求数据的⽅法；3.在⼦页⾯中调⽤封装的⽅法请求数据。#### 使⽤过哪些⽅法，来提⾼微信⼩程序的应⽤速度?1.提⾼页⾯加载速度；2.⽤户⾏为预测；3.减少默认data的⼤⼩；4.组件化⽅案。#### 分析下微信⼩程序的优劣势？优势：1、⽆需下载，通过搜索和扫⼀扫就可以打开。 2、良好的⽤户体验：打开速度快。 3、开发成本要⽐App要低。 4、安卓上可以添加到桌⾯，与原⽣App差不多。 5、为⽤户提供良好的安全保障。⼩程序的发布，微信拥有⼀套严格的审查流程，不能通过审查的⼩程序是⽆法发布到线上的。劣势：1、限制较多。页⾯⼤⼩不能超过1M。不能打开超过5个层级的页⾯。 2、样式单⼀。⼩程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯⽚、导航。 3、推⼴⾯窄，不能分享朋友圈，只能通过分享给朋友，附近⼩程序推⼴。其中附近⼩程序也受到微信的限制。 4、依托于微信，⽆法开发后台管理功能。#### 微信⼩程序与H5的区别？第⼀条是运⾏环境的不同: 传统的HTML5的运⾏环境是浏览器，包括webview，⽽微信⼩程序的运⾏环境并⾮完整的浏览器，是微信开发团队基于浏览器内核完全重构的⼀个内置解析器，针对⼩程序专门做了优化，配合⾃⼰定义的开发语⾔标准，提升了⼩程序的性能。第⼆条是开发成本的不同: 只在微信中运⾏，所以不⽤再去顾虑浏览器兼容性，不⽤担⼼⽣产环境中出现不可预料的奇妙BUG第三条是获取系统级权限的不同: 系统级权限都可以和微信⼩程序⽆缝衔接第四条便是应⽤在⽣产环境的运⾏流畅度: 长久以来，当HTML5应⽤⾯对复杂的业务逻辑或者丰富的页⾯交互时，它的体验总是不尽⼈意，需要不断的对项⽬优化来提升⽤户体验。但是由于微信⼩程序运⾏环境独⽴.#### ⼩程序关联微信公众号如何确定⽤户的唯⼀性使⽤rInfo⽅法withCredentials为 true 时 可获取encryptedData，⾥⾯有 union_id。后端需要进⾏对称解密。#### ⼩程序调⽤后台接⼝遇到哪些问题？1.数据的⼤⼩有限制，超过范围会直接导致整个⼩程序崩溃，除⾮重启⼩程序；2.⼩程序不可以直接渲染⽂章内容页这类型的html⽂本内容，若需显⽰要借住插件，但插件渲染会导致页⾯加载变慢，所以最好在后台对⽂章内容的html进⾏过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端的时间。