WeChat 애플릿 개발 노트를 모아보세요! !

WeChat Mini 프로그램 개발 튜토리얼Column오늘은 WeChat Mini 프로그램의 개발 노트를 소개하겠습니다. 살펴보세요.

최근 WeChat 애플릿을 개발 중인데 프로젝트에서 자주 접하는 지식 포인트를 다음에 확인할 수 있도록 기록해 두었습니다.
작은 프로그램을 개발하려면 vscode를 사용하여 코드를 작성하는 것이 좋으며 WeChat 개발 도구는 효과를 보고 디버그하는 데 사용됩니다.

1. 제목 표시줄 사용자 정의

요즘 UI 요구 사항이 점점 높아지고 사용자 정의 제목 표시줄이 자주 나타납니다

"navigationStyle": "custom"复制代码

2. 사용자 정보 얻기

사용자 인증은 모든 작은 프로그램에서 사용되며, 자신의 프로젝트 프로세스에 따라 자신만의 로직을 작성할 수 있습니다. 사용자 승인

<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>复制代码

bindGetUserInfo (e) {    console.log(e.detail.userInfo) // 获取到用户信息}复制代码

사용자가 승인되었는지 확인하려면 "wx.getUserInfo", "wx.getSetting"을 호출하여

wx.getSetting({  success (res){    if (res.authSetting['scope.userInfo']) {      // 已经授权，可以直接调用 getUserInfo 获取头像昵称      wx.getUserInfo({        success: function(res) {          console.log(res.userInfo)        }      })    } else {        // 未授权    }  }})复制代码

3 입력이 자리 표시자 스타일을 설정합니다

<input placeholder="请输入手机号码" placeholder-class="placeholderinput"></input>复制代码

.placeholderinput {  color: #CCCCCF;  font-size: 36rpx;}复制代码

4. 루팅

루팅은 점프할 때마다 어떤 방법으로 점프해야 할지 감이 안잡히네요.
tabBar 페이지로 점프하고 tabBar가 아닌 다른 모든 페이지를 닫습니다

wx.switchTab({    url: '../../index/index'})复制代码

앱의 페이지로 점프하지만 탭바 페이지로 점프하고 현재 페이지를 닫는 것은 허용하지 않습니다.

wx.redirectTo({    url: '../../index/index'})复制代码

현재 페이지를 유지하고 A로 점프 응용 프로그램 내의 페이지. 하지만 탭바 페이지로 이동할 수는 없습니다.

wx.navigateTo({    url: '../../index/index'})复制代码

5、image组件常用mode合法值梳理

为什么详细讲解image，每次后台上传的图片和我们前端界面的尺寸不一样，我们前端就要进行处理了，还有就是测试老是回提出一些图片变形上的问题，为了不让他们提出这些问题，我们详细分析一下，如果有不正确欢迎交流指正。 在固定宽高的情况下：

 <image src="/images/pic.jpg" class="pic" mode="aspectFill"></image>复制代码

.pic {  width: 600rpx;  height: 500rpx;  border: 1rpx solid #ccc;}复制代码

设置以下属性图片会发生什么变化

• scaleToFill  图片的宽高完全拉伸至填满 image 元素，会改变图片的宽高比，图片变形

  

• aspectFit 图片完整的展示出来，图片的宽高比不变。

  

• aspectFill 图片的宽高比不变，为完整的展示，会发生裁切  
  

  

常用的「aspectFit」  「aspectFill」这两个

6、设置input的「confirm-type」 的合法值

设置键盘右下角按钮的文字，type="text"时生效

• 보내기 오른쪽 하단 버튼은 "보내기"
• search 오른쪽 하단 버튼은 "검색"
• next 오른쪽 하단 버튼은 "다음"
• go 오른쪽 하단 버튼이 "Go"입니다
• done 오른쪽 하단 버튼이 "완료"

Android와 iOS의 통일된 확인 유형 설정을 구현하기 위해 필요하면 기본값은 done, 안드로이드 기본값은 Enter, iOS 기본값은 Done이므로 동일하게 설정하면 처음 4개가 통일될 수 있습니다.

관련 무료 학습 권장사항: WeChat 미니 프로그램 개발 튜토리얼

위 내용은 WeChat 애플릿 개발 노트를 모아보세요! !의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!