모방 QQ 위챗 애플릿에 대한 자세한 설명

이 글은 주로 SmallAppForQQ 프로젝트를 진행하면서 겪었던 몇 가지 문제에 대해 작성했습니다. 이 글을 읽는 것이 여러분에게 도움이 되기를 바랍니다.

SmallAppForQQ: QQ에 액세스하기 위한 WeChat 애플릿

글 시작 부분에서 개발 도구가 설치되어 있지 않은 경우 프로젝트 구조를 간략하게 소개하겠습니다.

github.com/xiehui999/SmallAppForQQ

다운로드로 이동하세요. WeChat 미니 프로그램 프로젝트 구조에는 다음과 같이 네 가지 주요 파일 유형이 있습니다.

1) WXML 파일: (Weixin Markup Language)는 이전 버전을 기반으로 WeChat에서 설계한 설명 태그 언어 세트입니다. . 애플릿의 뷰를 구축합니다.

2) WXSS 파일: (WeiXin Style Sheets)는 wxml의 뷰 구성 요소 스타일을 설명하는 데 사용되는 스타일 언어,

3) js 파일: 비즈니스 로직 처리 및 백엔드 수행 데이터

4) json 파일 : 페이지 등록, 페이지 제목 등 미니 프로그램 설정 파일입니다.

참고: 개발자가 구성 항목을 쉽게 줄일 수 있도록 페이지를 설명하는 4개 파일의 경로와 파일 이름이 동일해야 한다고 규정되어 있습니다.

app.json

루트 디렉터리에 있는 이 파일은 프로그램 항목 파일입니다.

이 파일이 필요합니다. 이 파일이 없으면 WeChat 프레임워크가 이를 구성 파일 항목과 전체 미니 프로그램의 전역 구성으로 사용하기 때문에 프로젝트를 실행할 수 없습니다. 페이지 등록, 네트워크 설정, 미니 프로그램의 창 배경색 등을 포함합니다.

app.js

이 파일이 있어야 합니다. 그렇지 않으면 오류가 보고됩니다! 하지만 이 파일만 만들면 아무것도 작성할 필요가 없습니다.

앞으로는 이 파일에서 미니 프로그램의 수명주기 기능을 모니터링하고 처리하고 전역 변수를 선언할 수 있습니다.

app.wxss

전역적으로 구성된 스타일 파일로, 프로젝트에는 필요하지 않습니다.

미니 프로그램의 기본 파일 구조를 알고 있다면 공식 데모 학습을 시작해도 됩니다. 연구 과정에서 이해되지 않는 부분이 있으면 공식 문서에서 답변을 얻을 수 있습니다. 다음은 발생할 가능성이 높은 몇 가지 문제입니다.

자주 묻는 질문(FAQ) rpx(반응형 픽셀)

WeChat 애플릿은 다양한 해상도의 화면에 적응할 수 있는 크기 단위를 새로 정의했습니다. 예를 들어 iPhone 6의 경우 화면 너비가 375px이고 총 750개의 물리적 픽셀이 있으므로 750rpx = 375px = 750개의 물리적 픽셀, 1rpx = 0.5px = 1개의 물리적 픽셀입니다.

(rpx는 WeChat에서 새로 정의한 크기 단위가 아닙니다. 이전에 모바일 개발에서 사용된 적이 있습니다. WeChat은 많은 학교의 장점을 흡수하고 이전 버전을 기반으로 소규모 프로그램 개발 프레임워크를 정의했습니다. 그리고 Apple처럼 , Apple은 AppStore를 열 때 앱 개발 언어로 Objective-C를 사용했지만 OC는 Apple이 발명한 것이 아닙니다.)

이 프로젝트에서 rpx 크기 단위를 사용했는데 그 과정에서 매우 이상한 현상을 만났습니다. . 문제. 인접한 두 정보 사이에 바로 구분선이 생기게 되는데, 선의 높이를 1rpx로 설정했는데, 개별 구분선이 없으면 아래 그림과 같이 표시되지 않습니다.

첫 번째와는 다르게 두 번째와 같은 실제 선은 없지만 나머지는 구분선의 속성이 동일하고 표시되지 않는 구분선이 다른 것을 알 수 있습니다. 휴대폰(해상도 다름)도 다르고 일부 해상도도 다릅니다. 여러 구분선이 표시되지 않습니다. 이것이 시뮬레이터의 버그인지 rpx의 버그인지 모르겠습니다. 마지막으로 구분선의 높이 크기 단위를 px로 하여 이 문제를 해결하였습니다. (실제로 검증되지 않은 레이아웃은 rpx, 장식 스타일은 px를 사용하시면 좋을 것 같습니다.)

40013 error

처음 위챗 애플릿이 나왔을 때, AppID를 선택하고 이 정보를 표시하면 크랙되지 않았음을 의미하지만 이제 공식 소프트웨어 업데이트는 아래와 같이 AppID 없이 개발하도록 선택할 수 있습니다. No AppID를 선택하면 이 오류를 해결할 수 있습니다. 공식 개발 도구를 설치하는 것이 좋습니다. 여기에서 다운로드 링크를 찾을 수 있습니다.

(현재 개인 개발자도 미니 프로그램 신청 가능, appId가 부족하지 않아 문제 없음)

-4058 오류(app.json 파일 누락)

WeChat Mini 프로그램 프로그램이 프로젝트를 생성할 때 AppID 없음을 선택하면 프로젝트 생성 시 app.josn이 프로그램 시작에 가장 중요한 파일입니다. 요청 시간 설정은 모두 이 파일 아래에 있습니다. 생성한 프로젝트 디렉터리에 app.json 파일이 없으면 다음과 같은 오류가 보고됩니다.

위의 오류 메시지에 숫자 -4058이 있는 것을 볼 수 있습니다. 이는 WeChat 애플릿에 처음 들어갈 때 발생하는 가장 일반적인 오류입니다. 일반적으로 이러한 종류의 오류는 파일 누락으로 인해 발생합니다. 경로를 확인하여 파일이 존재하는지 확인하세요. 이 오류가 발생하는 이유는 일반적으로 프로젝트 생성을 위해 선택한 디렉터리가 올바르지 않거나 존재하지 않는 페이지가 app.json에 등록되어 있기 때문입니다.

물론, app.json 파일의 페이지에 등록된 페이지가 생성되지 않거나, 페이지를 삭제하고 등록을 취소하지 않는 경우에도 -4058 오류가 발생하는 경우가 있습니다. .

페이지 등록 오류

이 오류는 쉽게 이해할 수 있는 페이지 등록 오류입니다. 페이지는 Page 객체를 통해 렌더링되며, 각 페이지에 해당하는 js 파일이 페이지를 생성해야 하며, 가장 간단한 방법은 js 파일 아래에 Page({})를 작성하는 것입니다. 여기에서 데이터 처리와 이벤트가 모두 완료됩니다. 이 오류가 발생하는 이유는 일반적으로 페이지가 방금 생성되었고 js 파일이 처리되지 않았거나 잊어버렸기 때문입니다. 따라서 페이지 생성 시 js 파일에서 먼저 페이지를 생성하는 습관을 길러야 합니다.

페이지 경로 오류

말 그대로 페이지 라우팅 오류를 의미합니다. WeChat에는 두 가지 라우팅 방법이 있습니다. 하나는 wxml 파일의 구성 요소를 사용하는 것이고, 다른 하나는 wx.navigateTo를 호출하는 것입니다.

다음 코드——

wxml:

검색

js:

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

이렇게 쓰면 축하합니다. 위에 표시된 오류는 경로에 대한 반복 호출로 인해 발생합니다. 해결 방법은 경로를 삭제하거나 구성 요소를 삭제하거나 wx.navigateTo를 삭제하는 것입니다. 위에서 언급한 가능한 라우팅 오류 외에도 허용되지 않는 다음 코드

검색

과 유사한 상황도 있는데, 이는 네비게이터 구성 요소가 내부에 중첩될 수 없음을 의미합니다. 구성 요소 탐색기.

현재 페이지에 * 핸들러가 없습니다.

아마도 현재 페이지에 이 핸들러가 없다는 의미이므로 정의되어 있는지 확인할 수 있고, 가능한 점도 지적할 수 있습니다. 오류가 발생한 위치 페이지/메시지/메시지, 실제로 이런 문제는 wxml에 일부 처리 이벤트를 정의할 때 주로 발생하는데, js 파일에 이벤트 처리 방법이 구현되어 있지 않으면 이런 오류가 발생합니다. 그런 다음 프롬프트에 따라 js 파일에 이벤트 처리를 추가합니다. 추가한 후에는 이 오류 메시지가 더 이상 나타나지 않습니다.

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

tabBar 설정이 표시되지 않습니다

tabBar가 표시되지 않는 데에는 여러 가지 이유가 있습니다. 이 오류를 찾으려면 app.json 파일로 직접 이동하세요. 가장 일반적인 오류이기도 합니다. WeChat 애플릿을 배울 때 오류는 다음과 같습니다.

등록 페이지는

"pages"와 같이 app.json의 페이지 필드에 페이지를 씁니다. ["페이지/메시지/메시지"," 페이지/연락처/연락처","페이지/동적/동적","페이지/동적/음악/음악","페이지/색인/색인","페이지/로그/로그" ]

1. tabBar 쓰기 오류로 인해 tabBar가 표시되지 않습니다. 대문자 B가 소문자로 쓰여져 tabBar가 표시되지 않습니다.

2. tabBar 목록에 pagePath 필드가 기록되지 않았거나, pagePath에 있는 페이지가 등록되지 않았습니다.

3. tabBar 목록의 pagePath에 지정된 페이지가 다음과 같이 기록되지 않았습니다. 등록 페이지의 첫 번째 항목입니다. WeChat 애플릿의 논리는 "페이지"의 첫 번째 페이지가 프로그램이 시작된 후 표시되는 첫 번째 페이지라는 것입니다. tabBar 목록의 pagePath로 지정된 페이지가 페이지의 첫 번째 페이지가 아닌 경우입니다. , 물론 TV tabBar는 없을 것입니다.

5. tabBar 개수는 2개 미만, 5개 이상입니다. WeChat 공식에서는 tabBar 개수가 최소 2개, 최대 5개여야 한다고 명시하고 있습니다. tabBar는 그보다 크거나 작으면 표시되지 않습니다.

NavigationBarTitle 표시 문제

이 동적 다이어그램을 통해 문제를 찾아야 합니다. 음악 인터페이스에 들어가기 위해 음악을 클릭하면 제목이 먼저 WeChatForQQ를 표시한 다음 음악을 표시합니다. 확실히 받아들일 수 없습니다. 그 이유는 음악 인터페이스의 제목이 js 파일의 페이지 라이프 사이클 메서드에 설정되어 있기 때문입니다.

라이프사이클이 이해가 안가시면 클릭하시면

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

설정 제목이 onReady 메소드, 즉 페이지에 적혀 있다는 것을 댓글을 통해 이해하셔야 합니다. onReady 전에 렌더링되었습니다. 표시되는 제목은 json 파일의 제목입니다(관계 덮어쓰기, 제목이 하위 페이지 json 파일에 설정된 경우 app.json 전역 설정이 재정의됩니다). wx.setNavigationBarTitle이 onLoad 함수에 작성되었다고 할 수 있지만, onLoad가 실행된 후에 페이지가 렌더링되기 때문에 이 설정은 올바르지 않습니다. 페이지를 렌더링할 때 json 파일에서 제목을 읽어서 onLoad에 의해 제목이 설정됩니다. 페이지 렌더링 전에 표시되고 json 파일의 타일이 표시됩니다. 따라서 이제 ttle을 설정하는 가장 좋은 위치는 하위 파일에 대한 json 파일을 작성하고 이를 파일에 작성하는 것임을 이해해야 합니다. 색상을 변경하려면 파일에 직접 추가하세요. 예, 이 파일에 기록된 속성 값은 app.json에 설정된 값보다 우선 적용됩니다.

{
"navigationBarTitleText":"音乐"}

창 제목은 세 위치에 따라 다릅니다.

1. app.json의 앱 제목 설정

2. 동일한 이름의 json 파일의 제목 설정 페이지

3, js 코드는 wx.setNavigationBarTitle 인터페이스를 통해 설정됩니다.

제목이 정적인 경우 2를 통해 설정합니다. 창 자체가 동적이고 제목이 스케일 ID와 같이 전달된 매개변수에 따라 달라지는 경우 1의 NavigationBarTitleText를 비어 있도록 설정한 다음 js에서 이동하는 것이 가장 좋습니다. 빈 설정은 모든 페이지에 영향을 미칩니다.

wx.navigateTo는 페이지를 열 수 없습니다

애플리케이션은 동시에 5페이지만 열 수 있습니다. 5페이지를 연 후에는 wx.navigateTo가 정상적으로 새 페이지를 열 수 없습니다. 다단계 상호작용을 피하거나 wx.redirectTo를 사용하세요.

간단하게는 wx.redirectTo를 사용하고, 선사시대 PC웹사이트의 단일페이지 웹사이트처럼 작은 프로그램 단일페이지 애플리케이션, 단일페이지 애플리케이션을 개발하는 것을 추천한다. .

wx.navigateTo5 페이지의 열기 제한과 관련하여 이를 해결할 수 있는 도구나 솔루션이 있나요?

navigateTo는 5개 수준으로 제한됩니다. 이는 실제로 페이지 스택의 요소가 5개를 초과할 수 없음을 규정합니다. 페이지 스택의 요소 수가 5개에 도달하면 더 이상 요소를 추가할 수 없습니다. 미니 프로그램 페이지 스택에 대한 자세한 설명은 다음 기사를 읽어보세요:

www.ifanr.com/minapp/744601

이 기사는 해결책을 제공하지 않습니다. 코더는 여기서 이론적인 솔루션을 제공합니다.

1, 모든 점프에 리디렉션을 사용하고 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!