WeChat applet development notes, collect them! !

WeChat Mini Program Development TutorialColumnToday I will introduce you to the development notes of WeChat Mini Program, take a look.

Recently I am developing a WeChat applet and record the knowledge points I often encounter in the project so that I can check it next time.
To develop small programs, it is recommended to use vscode to write code, and WeChat development tools are used to view effects and debug.

1. Custom title bar

Nowadays, UI requirements are getting higher and higher, and custom titles appear frequently. Column situation

"navigationStyle": "custom"复制代码

2. Obtain user information

User authorization is used in every mini program Yes, you can write your own logic according to your own project process. User authorization

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

rrree

If authorized, call 「wx.getUserInfo」, 「wx.getSetting」 to determine whether the user is authorized

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

3. Input set placeholder style

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

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

4. Routing

Routing jumps are used a lot. Every time I jump, I can't tell which method to use. Write it down to deepen your impression.
Jump to the tabBar page and close all other non-tabBar pages

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

Jump to a page within the application, but do not allow jumping to the tabbar page and close the current page

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

Keep the current page and jump to a page within the application. But you cannot jump to the tabbar page.

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"时生效

• send The button in the lower right corner is "Send"
• search The button in the lower right corner is "Search"
• next The button in the lower right corner is "Next"
• go The button in the lower right corner is "Go"
• done The button in the lower right corner is "Done"

In order to achieve unified confirm-type settings for Android and iOS, it is also necessary. The default value is done, the Android default is Enter, and the iOS default is Done, so the first four settings are the same. Can be unified.

Related free learning recommendations: WeChat Mini Program Development Tutorial

The above is the detailed content of WeChat applet development notes, collect them! !. For more information, please follow other related articles on the PHP Chinese website!