WeChat-Applet-Entwicklungsnotizen, sammeln Sie sie! !

Tutorial zur Entwicklung des WeChat Mini-ProgrammsKolumneHeute werde ich Ihnen die Entwicklungsnotizen des WeChat Mini-Programms vorstellen, werfen Sie einen Blick darauf.

Kürzlich entwickle ich ein WeChat-Applet und zeichne die Wissenspunkte auf, auf die ich im Projekt häufig stoße, damit ich sie beim nächsten Mal überprüfen kann.
Das empfohlene Entwicklungstool für die Entwicklung kleiner Programme ist vscode zum Schreiben von Code, und WeChat-Entwicklungstools werden zum Anzeigen von Effekten und zum Debuggen verwendet.

1 Autorisierung wird in jedem kleinen Programm verwendet, und Sie können Ihre eigene Logik entsprechend Ihrem eigenen Projektprozess schreiben. Benutzerautorisierung

"navigationStyle": "custom"复制代码

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

Rufen Sie "wx.getUserInfo"

,

"wx.getSetting"

auf, wenn Sie autorisiert sind, um festzustellen, ob der Benutzer autorisiert ist

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

3. Die Eingabe legt den Platzhalterstil fest

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 wird oft für Sprünge verwendet, ich kann nicht sagen, welche Methode ich verwenden soll, um deinen Eindruck zu vertiefen. Zur TabBar-Seite springen und alle anderen Nicht-TabBar-Seiten schließen

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

Zu einer Seite in der App springen, aber das Springen zur TabBar-Seite und das Schließen der aktuellen Seite nicht zulassen

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

Die aktuelle Seite behalten und zu A springen Seite innerhalb der Anwendung. Sie können jedoch nicht zur Tabbar-Seite springen.

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

• Senden Die Schaltfläche in der unteren rechten Ecke ist „Senden“
• Suchen Die Schaltfläche in der unteren rechten Ecke ist „Suchen“
• Weiter Die Schaltfläche in der unteren rechten Ecke ist „Weiter“
• Los Die Schaltfläche in der unteren rechten Ecke ist „Los“
• Fertig Die Schaltfläche in der unteren rechten Ecke ist „Fertig“

Um einheitliche Bestätigungstypeinstellungen für Android und iOS zu erreichen, ist dies auch der Fall Der Standardwert ist „Fertig“, der Android-Standardwert ist „Eingabe“ und der iOS-Standardwert ist „Fertig“. Stellen Sie also den gleichen Wert ein. Die ersten vier können vereinheitlicht werden.

Verwandte kostenlose Lernempfehlungen: WeChat Mini-Programmentwicklungs-Tutorial

Das obige ist der detaillierte Inhalt vonWeChat-Applet-Entwicklungsnotizen, sammeln Sie sie! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!