WeChat アプレット開発ノート、集めてください! ！

WeChat ミニ プログラム開発チュートリアルコラム今日は WeChat ミニ プログラムの開発ノートを紹介しますので、ご覧ください。

最近、WeChat アプレットを開発しており、プロジェクトでよく遭遇するナレッジ ポイントを記録して、次回確認できるようにしています。
小さなプログラムを開発するには、vscode を使用してコードを記述し、WeChat 開発ツールを使用してエフェクトを表示し、デバッグすることをお勧めします。

1. カスタム タイトル バー

現在、UI の要件はますます高くなっており、カスタム タイトルが頻繁に表示されます。 . 列の状況

"navigationStyle": "custom"复制代码

2. ユーザー情報の取得

ユーザー権限はすべてのミニ プログラムで使用されます。独自のプロジェクトプロセスに従って独自のロジックを作成できます。 ユーザー承認

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

errree

承認されている場合は、「wx.getUserInfo」、「wx.getSetting」を呼び出してユーザーが承認されているかどうかを確認します

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

3. 入力セットのプレースホルダー スタイル

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. ルーティング

ルーティングジャンプが多用されるのですが、毎回ジャンプするたびにどの方法を使えばいいのか分からないので、感想を深めたいのでメモしておきます。
tabBar ページにジャンプし、他のすべての非 tabBar ページを閉じます

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

アプリケーション内のページにジャンプしますが、タブバー ページにジャンプして現在のページを閉じることはできません

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

現在のページを保持し、アプリケーション内のページにジャンプします。ただし、タブバーページにジャンプすることはできません。

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 右下のボタンは「送信」
• search 右下のボタンは「検索」
• next 右下のボタンは「次へ」
• go 右下のボタンは「Go」
• done 右下のボタンは「完了」です

Android と iOS で確認タイプの設定を統一するためにも必要です。値は「完了」、Android のデフォルトは Enter、iOS のデフォルトは Done なので、最初の 4 つの設定は同じであり、統一できます。

関連する無料学習の推奨事項: WeChat ミニ プログラム開発チュートリアル

以上がWeChat アプレット開発ノート、集めてください! ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。