위챗 미니 프로그램 내부 베타 버전이 출시된 지 열흘이 넘었고, 위챗 미니 프로그램이 출시된 시점부터 현재까지 온라인에서 뜨거운 논의가 이어지고 있습니다. 프로그램은 다양한 기술 포럼의 헤드라인을 차지하고 있습니다. 물론 다양한 플랫폼에서도 WeChat 미니 프로그램에 대한 뉴스 보도가 나오고 있습니다. 결국 Tencent는 중국에서 여전히 큰 영향력을 갖고 있습니다. 위챗 미니 프로그램이 첫날 내부 베타 버전을 출시하고 공식 개발 문서와 개발 도구를 공개하지 않았다는 사실은 모두가 알고 있지만, 이것이 기술자들의 호기심을 멈출 수는 없다.
저도 작은 프로그램에 관심이 많고 재미있는 일이라고 생각해서 바로 작은 데모를 만들어 봤습니다. 레벨이 제한되어 있어서 하는 과정도 학습 과정이고, 개선.
이 글은 주로 제가 데모를 작성하면서 겪었던 몇 가지 문제에 대해 썼습니다. 이 글을 읽으시는 데 도움이 되셨다면 정말 기쁘겠습니다.
1: 프로젝트 구조
WeChat 애플릿 프로젝트 구조는 크게 다음과 같은 4가지 파일 형식으로 구성됩니다.
WXML(WeiXin Markup Language)은 설계된 태그 언어 집합입니다. 프레임워크를 통해 기본 컴포넌트와 이벤트 시스템을 결합하여 페이지의 구조를 구성할 수 있습니다. 내부적으로는 주로 WeChat 자체에서 정의한 구성 요소 집합입니다.
WXSS(WeiXin Style Sheets)는 WXML 구성 요소 스타일,
js 논리 처리, 네트워크 요청
json 애플릿 설정 등을 설명하는 데 사용되는 스타일 언어 집합입니다. 페이지 등록, 페이지 제목 및 tabBar로.
참고: 개발자가 구성 항목을 쉽게 줄일 수 있도록 페이지를 설명하는 4개 파일의 경로와 파일 이름이 동일해야 한다고 규정되어 있습니다.
루트 디렉터리에 app이라는 이름의 4가지 파일이 프로그램 항목 파일입니다.
app.json
이 파일이 있어야 합니다. 이 파일이 없으면 WeChat 프레임워크가 이를 구성 파일 항목과 전체 미니 프로그램의 전역 구성으로 사용하기 때문에 프로젝트를 실행할 수 없습니다. 페이지 등록, 네트워크 설정, 미니프로그램 창 배경색 설정, 네비게이션 바 스타일 설정, 기본 제목 설정 등을 포함합니다.
app.js
이 파일이 있어야 합니다. 그렇지 않으면 오류가 보고됩니다! 하지만 이 파일만 작성하면 아무것도 작성할 필요가 없습니다.
앞으로는 이 파일에서 미니 프로그램의 수명주기 기능을 모니터링하고 처리하고 전역 변수를 선언할 수 있습니다.
app.wxss
전역적으로 구성된 스타일 파일로, 프로젝트에는 필요하지 않습니다.
미니 프로그램의 기본 파일 구조를 알고 있다면 공식 데모 학습을 시작해 보세요. 연구 과정에서 이해가 되지 않는 부분이 있으면 공식 문서로 가서 답변을 얻으실 수 있습니다. 답변을 찾을 수 없거나 궁금한 점이 있으면 이 블로그를 방문하여 메시지를 남기고 서로 소통할 수 있습니다. 발생할 가능성이 더 높은 몇 가지 문제는 다음과 같습니다.
2: 자주 묻는 질문
rpx(반응형 픽셀)
WeChat 애플릿은 다양한 해상도의 화면에 적응할 수 있는 크기 단위를 새로 정의했습니다. 예를 들어 iPhone 6의 화면 너비는 375px이고 총 750개의 물리적 픽셀이 있으므로 750rpx = 375px = 750개의 물리적 픽셀, 1rpx = 0.5px = 1개의 물리적 픽셀입니다.
이번 프로젝트에서는 rpx 크기 단위를 사용했는데, 그 과정에서 아주 이상한 문제에 부딪혔습니다. 인접한 두 정보 사이에 바로 구분선이 생기게 되는데, 선의 높이를 1rpx로 설정했는데, 개별 구분선이 없으면 아래 그림과 같이 표시되지 않습니다.
첫 번째와는 다르게 두 번째와 같은 실제 선은 없지만 나머지는 구분선의 속성이 동일하고 표시되지 않는 구분선이 다른 것을 알 수 있습니다. 휴대폰(해상도 다름)도 다르고 일부 해상도도 다릅니다. 여러 구분선이 표시되지 않습니다. 이것이 시뮬레이터의 버그인지 rpx의 버그인지 모르겠습니다. 마지막으로 구분선의 높이 크기 단위를 px로 하여 이 문제를 해결하였습니다.
40013 오류
WeChat 애플릿이 처음 나왔을 때 AppID를 입력하고 이 정보를 표시하면 크랙되지 않았다는 뜻이지만 이제 공식 소프트웨어 업데이트에서 개발을 선택할 수 있습니다. AppID 없이 아래와 같이 우리 사이에서 AppID 없음을 선택하면 이 오류가 해결됩니다. 공식 개발 도구를 설치하는 것이 좋습니다. 여기에서 다운로드 링크를 찾을 수 있습니다.
오류 4058
WeChat 애플릿 프로젝트 생성 시 AppID를 선택하지 마세요. 프로젝트 생성 시 app.json이 생성됩니다. 프로그램 시작, 창 설정, 탭 설정에 가장 중요한 파일입니다. 요청 시간 설정은 모두 이 파일 아래에 있습니다. 생성한 프로젝트 디렉터리에 app.json 파일이 없으면 다음과 같은 오류가 보고됩니다.
위의 오류 메시지에 숫자 -4058이 있는 것을 볼 수 있습니다. 이는 WeChat 애플릿에 처음 들어갈 때 발생하는 가장 일반적인 오류입니다. 일반적으로 이러한 종류의 오류는 파일 누락으로 인해 발생합니다. 경로를 확인하여 파일이 존재하는지 확인하세요. 이 오류가 발생하는 이유는 일반적으로 프로젝트 생성을 위해 선택한 디렉터리가 올바르지 않거나 존재하지 않는 페이지가 app.json에 등록되어 있기 때문입니다.
물론, app.json 파일의 페이지에 등록된 페이지가 생성되지 않거나, 페이지를 삭제하고 등록을 취소하지 않는 경우도 있는데, 이 경우에도 -4058 오류가 발생합니다.
페이지 등록 오류
이 오류는 쉽게 이해할 수 있는 페이지 등록 오류입니다. 페이지는 Page 객체를 통해 렌더링되며, 각 페이지에 해당하는 js 파일이 페이지를 생성해야 하며, 가장 간단한 방법은 js 파일 아래에 Page({})를 작성하는 것입니다. 여기에서 데이터 처리와 이벤트가 모두 완료됩니다. 이 오류가 발생하는 이유는 일반적으로 페이지가 방금 생성되었고 js 파일이 처리되지 않았거나 잊어버렸기 때문입니다. 따라서 페이지를 생성할 때 먼저 js 파일에 페이지를 생성하는 습관을 길러야 합니다.
페이지 경로 오류
말 그대로 페이지 라우팅 오류를 의미합니다. 하나는 wxml 파일에서 다음 코드를 사용하는 것입니다.
wxml 파일:
js 파일 이벤트 처리 함수:
bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
}
이렇게 쓰면 축하합니다. 위와 같은 오류가 발생합니다. 이는 해당 경로에 대한 반복 호출로 인해 발생합니다. 경로 삭제,
이것도 허용되지 않습니다. 즉,
현재 페이지에 * 핸들러가 없습니다.
은 아마도 현재 페이지에 이 처리가 없다는 의미이므로 정의되었는지 확인할 수 있으며, 오류가 발생할 수 있는 위치도 지적합니다: 페이지/메시지/메시지. 이런 문제는 일반적으로 wxml에 무언가를 정의할 때 발생합니다. 이 오류는 이벤트를 처리하지만 js 파일에 이벤트 처리 방법이 구현되지 않은 경우에 발생합니다. 그런 다음 프롬프트에 따라 js 파일에 이벤트 처리를 추가합니다. 추가한 후에는 이 오류 메시지가 더 이상 나타나지 않습니다.
bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
},tabBar 설정이 표시되지 않습니다
tabBar가 표시되지 않는 데에는 여러 가지 이유가 있습니다. 이 오류를 찾으려면 app.json 파일로 직접 이동하세요. 가장 일반적인 오류이기도 합니다. WeChat 애플릿을 배울 때 오류는 다음과 같습니다.
등록 페이지는
"pages":[ "pages"와 같이 app.json의 페이지 필드에 페이지를 기록합니다. /메시지/메시지", "페이지/연락처/연락처", "페이지/동적/동적", "페이지/동적/음악/음악", "페이지/색인/색인", "페이지/로그/로그"
tabBar 작성 방법 오류로 인해 표시되지 않습니다. 대문자 B가 소문자로 작성되어 tabBar가 표시되지 않습니다.
tabBar 목록의 pagePath에 지정된 페이지가 등록 페이지에 먼저 기록되지 않았습니다. WeChat 애플릿의 논리는 "페이지"의 첫 번째 페이지가 홈페이지이며, 이는 프로그램이 시작된 후 표시되는 첫 번째 페이지입니다. tabBar 목록의 pagePath로 지정된 페이지가 페이지의 첫 번째 페이지가 아닌 경우, 물론 그럴 것입니다. 더 이상 TV tabBar가 없습니다.
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之前显示的title就是json文件（覆盖关系，如果在子页面json文件设置title会覆盖app.json全局设置）中的title。可能你会说将wx.setNavigationBarTitle写在onLoad函数中，不过如果这样设置是不对的，因为onLoad执行过后才渲染页面，在渲染页面时title会从json文件中读取，导致onLoad设置的title会只在页面渲染之前展示，之后就显示json文件的tile，所以现在你应该明白ttle设置最优的地方就是给子文件写一个json文件，在文件中写入，如果想改变颜色直接在文件中添加就可以，该文件所写的属性值会覆盖app.json中设置的值。
{
"navigationBarTitleText": "音乐"
}wx.navigateTo无法打开页面
一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo
本地资源无法通过 css 获取
background-image：可以使用网络图片，或者 base64，或者使用标签
页面间数据传递
微信小程序路由（页面跳转）是通过API wx.navigateTo或者wxml中
<navigator url="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">
<view class="item" >
<view class="item-left">
<image src="{{item.url}}" class="image"/>
</view>
<view class="item-middle">
<view>
<text class="title">{{item.title}}</text>
</view>
<view>
<text class="message">{{item.message}}</text>
</view>
</view>
<view class="item_right">
<view><text class="time">{{item.time}}</text></view>
<view class="mark" wx:if="{{item.count>0}}"><text class="text">{{item.count}}</text></view>
</view>
</view>
<view class="line"></view>
</navigator>而数据接收是在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"})
},
})这样就实现了页面间数据传递功能。
更多微信小程序开发常见问题分析相关文章请关注PHP中文网！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
