WeChat ミニ プログラムに関する質問 (1)

この記事は、仕事で小さなプログラムを開発する際に遭遇した問題や経験をまとめたもので、機能の詳細を整理し、プロセスへの理解を深めていくことを目的としています。

1.vant-weapp UIの導入

1. アプレット プロジェクトのターミナルを開いて実行し、mpn initpackage.json ファイルを初期化します;
2. それを実行しnpm i @vant/weapp -S、vant-weapp コンポーネント ライブラリをインストールします。成功すると、node_module 依存関係パッケージが生成されます;
3. WeChat 上で開発者ツールで、左上隅の [ツール] をクリックします。 [Build npm] をクリックすると、成功後に miniprogram_npm ファイルが生成されます。 4. 新しいバージョンのミニ プログラムが追加されたため、
app.json ファイル“style”:"V2"から を削除します。基本コンポーネントには多くのスタイルがあり、これをカバーするのは困難です。
5. project.config.json ファイルを変更します: 設定

6. 使用:
import: app.json で構成します

"usingComponents": {
    "van-button":"@vant/weapp/button/index"
  },

部分インポート：ページに対応するjsonファイルに設定（同上）

2. アプレット tabBar を構成する

app.jsonで設定する

"tabBar": {
    "color": "#999999",
    "selectedColor": "#0071D0",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "pages/me/index",
        "text": "我的",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
  },

3. ミニプログラムのログイン認証プロセス

1. トークンがあるかどうかを判断し、トークンが存在する場合は有効性を確認し、有効な場合は続行し、無効な場合はトークンをクリアします。 2. トークンが無効であるか存在しない場合は、ログインを実行します
。プロセス、最初に呼び出しwx:openSetting（設定ページの認可を開く）してユーザーが認可されているかどうかを判断し、認可されていない場合はユーザーに認可させます; 3. 認可されている場合は、呼び出してログイン認証コード
をwx.login取得し、コードをサーバーに送信し、openid を取得します
、session_key およびその他の情報をローカルに保存します; 4. ユーザーはボタンをクリックして (必要に応じてオープンタイプを設定します) イベントをトリガーし、iv、encryptedData を取得し、コードの適時性を確認できます; 5. サーバーを呼び出し
ますインターフェイス、トークンを取得してキャッシュします。

// 定义 login.js 文件
//获取到openid, session_key等信息
const login = () => {
  return new Promise((resolve, reject) => {
    // 调用微信登录接口获取用户临时登录凭证 code
    wx.login({
      success: (res) => {
        if (res.code) {
          // 登录成功，将 code 发送到开发者服务器
          wx.request({
            url: 'https://example.com/login',
            data: {
              code: res.code
            },
            success: (res) => {
              // 获取用户唯一标识 OpenID 和会话密钥 session_key
              const { openid, session_key } = res.data;
              // 将用户信息存储到缓存中，生成自定义登录态
              wx.setStorageSync('openid', openid);
              wx.setStorageSync('session_key', session_key);
              resolve();
            },
            fail: (err) => {
              reject(err);
            }
          });
        } else {
          reject(res.errMsg);
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};
// 判断用户是否已授权
const checkAuth = () => {
  return new Promise((resolve, reject) => {
    // 获取用户当前设置状态
    wx.getSetting({
      success: (res) => {
        // 判断用户是否已授权
        if (res.authSetting['scope.userInfo']) {
          resolve();
        } else {
           // 用户未授权，引导用户打开设置页面进行授权
		    wx.showModal({
		      title: '提示',
		      content: '检测到您未授权登录，请先进行授权。',
		      showCancel: false,
		      success: (res) => {
		        if (res.confirm) {
		          wx.openSetting({
		            success: (res) => {
		              if (res.authSetting['scope.userInfo']) {
		                // 用户已授权，可进行相关操作
		                resolve();
		              }
		            }
		          });
		        }
		      }
		    });
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};

// 在需要登录的页面调用 login() 方法进行登录授权和判断用户是否已授权
onLoad(){
	login();
}
//下面是用户手动触发的getPhoneNumber方法
getPhoneNumber(e){
	//这里可以使用 wx.checkSession 校验一下code 的有效性
	//e 里面可以拿到iv、encryptedData；发送给服务器获取到登录token
}

ここでは、サーバーからユーザーの情報を取得した後に戻るインターフェイスを使用しましたが、 を使用してwx.getUserInfoユーザーの情報を取得することもできます。

注: wx.openSetting() メソッドを呼び出すときは、アプレットの app.json ファイルに対応する権限設定を追加する必要があります。たとえば、ユーザー情報コンポーネントを使用する場合は、app.json に次のコードを追加する必要があります。

"permission": {
  "scope.userLocation": {
    "desc": "获取你的地理位置信息"
  },
  "scope.userInfo": {
    "desc": "获取你的个人信息"
  }
}

4. 少額プログラム決済（WeChat決済）

資格：

1. ミニ プログラムは実名認証を完了しています: 審査のために関連する個人情報またはビジネス情報を送信する必要があり、支払い機能は合格した後にのみ有効になります; 2. ミニ プログラムは WeChat 決済を有効にしました: の管理背景
でミニ プログラムでは、最初に WeChat 支払い機能を有効にし、関連するパラメーターとキーを設定する必要があります;
3. WeChat 販売アカウントのバインド: 支払い機能を有効にするには、販売アカウントを関連付ける必要があります。

プロセス：

1. WeChat Pay加盟店プラットフォームに加盟店アカウントを登録し、関連資格の認証と審査を行う必要があります。審査に合格すると、WeChat Payの加盟店ID、APIキー、証明書などの情報を取得できます;
2. ミニプログラムでWeChat決済機能を申請し、加盟店IDをバインドします;
3. wx.requestメソッドを使用して呼び出します统一下单前払い請求情報を取得するインターフェース。取得した情報をwx.requestPaymentメソッド支払いリクエストを開始します。

wx.requestPayment({
  timeStamp: payParams.timeStamp,
  nonceStr: payParams.nonceStr,
  package: payParams.package,
  signType: payParams.signType,
  paySign: payParams.paySign,
  success(res) {
    console.log('支付成功', res);
  },
  fail(err) {
    console.log('支付失败', err);
  }
});

5. 小規模なプログラムの共有

WeChat ミニ プログラムは、ミニ プログラム ページの共有機能を有効にするために使用できる wx.showShareMenu API を提供します。共有機能を有効にすると、ユーザーはミニ プログラム ページを他のユーザーやグループ チャットと共有できるようになります。

1. ミニプログラムページのwx.showShareMenuメソッド共有機能を有効にします。このメソッドは、onReady ライフサイクル関数で呼び出すことができます。

onReady: function() {
  wx.showShareMenu({
    withShareTicket: true,
    success: (res) => {
      // 分享功能开启成功
    }
  });
},

2. ミニ プログラム ページで共有操作をトリガーするカスタム ボタンを定義します。ボタンのbindtap属性でonShareメソッドをバインドします。

<button type="primary" bindtap="onShare">分享</button>

3. アプレット ページで onShare メソッドを定義して、共有操作をトリガーします。このメソッドでは、wx.shareAppMessage メソッドを呼び出して共有パラメータを生成し、共有インターフェイスを開きます。

onShare: function() {
  return {
    title: '分享标题',
    path: '/pages/index/index',
    imageUrl: '/images/share.png'
  };
},

4. ミニプログラムページに共有統計コードを追加します。onShareAppMessage ライフサイクル関数でバックグラウンド インターフェイスを呼び出して、共有イベントを記録し、データをアップロードできます。

onShareAppMessage: function(res) {
  const { from, target, webViewUrl } = res;
  // 调用后台接口记录分享事件
  // ...
  return {
    title: '分享标题',
    path: '/pages/index/index',
    imageUrl: '/images/share.png'
  };
},

1番目と4番目の両方とも右上隅にある共有を開くことができます。

6. アプレットは内蔵マップ (Tencent マップ) を開きます。

uni.openLocation({
 	latitude: 31.230416, // 上海的纬度
  	longitude: 121.473701, // 上海的经度
  	name: '上海市', // 地点名称
  	address: '中国上海市黄浦区人民广场', // 地址的详细说明
  	scale: 18, // 缩放比例
  	success: function(res) {
    console.log('打开地图成功');
  },
  fail: function(err) {
    console.log('打开地图失败', err);
  }
});

マップ上で指定された場所のマークされたポイントを表示し、ナビゲーション用の組み込みマップの呼び出しをサポートします。マップを開いた後、右下隅にあるナビゲーション アイコンをクリックしてオプション ポップアップ ウィンドウをポップアップ表示し、ユーザーがナビゲーションに使用する地図アプリケーションを選択します。

7. アプレットがアプリを開きます

公式の指示によると、アプレットからどのアプリにもジャンプすることはできず、アプリに戻ることのみが可能です。つまり、アプリからアプレットにジャンプし、その後アプレットからアプリに戻ることのみが可能です。アプレットは、アプリに戻るためにユーザーによってトリガーされる必要があるため、API によって制御されません。呼び出すには、open-type 値が launchApp に設定されているボタン コンポーネントをクリックしてトリガーする必要があります。

APP を開くときに APP にパラメーターを渡す必要がある場合は、渡すパラメーターとして app-parameter を設定できます。APP を開く際のエラー イベントは、bindererror を通じて監視できます。

<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>
Page({
  launchAppError (e) {
    console.log(e.detail.errMsg)
  }
})

参考：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html

注:
1. アプレットは携帯電話のデフォルトのブラウザを開くことができません。

8. アプレットは他のアプレットを開きます

公開されている別のアプレットを開くには、ユーザーはクリックしてジャンプを確認する必要があります。記事を書くときにアプレット間をジャンプするのに制限はなく、自由にジャンプできます。

wx.navigateToMiniProgram({
  appId: 'wx1234567890', // 要打开的小程序的appId
  path: '/pages/index', // 打开的页面路径，如果为空则打开首页
  extraData: {
    foo: 'bar' // 需要传递给目标小程序的数据，格式为键值对
  },
  success(res) {
    console.log('打开小程序成功', res);
  },
  fail(err) {
    console.log('打开小程序失败', err);
  }
});

ユーザーがターゲット アプレットを承認してログインしていることを確認する必要があります。そうでない場合、ジャンプは失敗します。パス パラメータは、開かれたページの onLoad ライフ サイクルのオプションを通じて取得できます。extraData は、onLaunch パラメータおよび onShow パラメータを通じてe.referrerInfo取得

前のミニプログラムに戻りたい場合は、以下を使用できます。 wx.navigateBackMiniProgram は、現在のミニプログラムが他のミニプログラムによって開かれている場合にのみ正常に呼び出すことができます。

9. アプレットは現在の地理的位置を取得します。

まず、app.json で位置情報のアクセス許可を構成する必要があります (uni-app は、manifest.json の mp-weixin で設定する必要があります)。

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序内的定位服务"
    }
  }

認可の要求と位置情報の取得はどちらも非同期操作であり、結果はコールバック関数で処理する必要があります。さらに、ユーザーが承認を拒否した場合、または承認されていない場合、wx.getLocation メソッドは失敗します。

// 请求授权
wx.authorize({
  scope: 'scope.userLocation',
  success: function() {
    // 授权成功，获取位置信息
    wx.getLocation({
      type: 'wgs84', // 坐标类型，默认为wgs84，可选gcj02
      success: function(res) {
        const latitude = res.latitude; // 纬度
        const longitude = res.longitude; // 经度
        const speed = res.speed; // 速度，单位m/s
        const accuracy = res.accuracy; // 位置精度
        console.log('获取位置信息成功', res);
      },
      fail: function(err) {
        console.log('获取位置信息失败', err);
      }
    });
  },
  fail: function() {
    // 授权失败，提示用户开启权限
    wx.showModal({
      title: '未授权地理位置信息',
      content: '请在设置中打开地理位置权限',
      showCancel: false,
      confirmText: '确定'
    });
  }
});

追加: 住所の選択

アプレット管理のバックグラウンドで、「開発」-「開発管理」-「インターフェース設定」によりインターフェース権限が自動的に有効になります。

wx.chooseAddress({
      success(res){
        console.log(res)
      },
      fail(err){
        console.log(err)
      }
    })

配送先住所を編集するためのオリジナルのインターフェースを呼び出すことができ、既存の住所を選択するか、新しい住所を追加することができます。

10. バージョン更新を自動的に検出する

app.js内

App({
  onLaunch() {
    this.autoUpdate();
  },
  globalData: {
    userInfo: null
  },
  //检测版本更新
  autoUpdate(){
    //检测当前设备是否可用getUpdateManager api
    if(wx.canIUse('getUpdateManager')){
      const updateManasger = wx.getUpdateManager();
      //检测是否有版本更新
      updateManasger.onCheckForUpdate(function(res){
        if(res.hasUpdate){
          wx.showModal({
            title: '更新提示',
            content: '需要重启小程序完成更新',
            success: (res) => {
              if (res.confirm) {
                //更新成功，强制重启小程序并使用新版本
                updateManasger.onUpdateReady(function(){
                  updateManasger.applyUpdate();
                })
                //更新失败，提示用户删除小程序重新进入
                updateManasger.onUpdateFailed(function(){
                  wx.showModal({
                    title: '更新提示',
                    content: '小程序更新失败，请您删除当前小程序，重新搜索打开！'
                  })
                })
              }
            }
          })
        }
      })
    }
  }
})

11. エンタープライズ WeChat でアプレットを構成する

1. 企業の WeChat バックグラウンドにログインします: [アプリとミニ プログラム] - [ミニ プログラム] - [関連するミニ プログラム]、またはミニ プログラムのバックグラウンドにログインします: [設定] - [関連付け] - [設定] - [関連する WeChat]; 2. ミニプログラム管理者権限は、関連付けプロセス;
3
. アプレットの表示範囲が設定されるため、WeChat Work のメンバーはワークベンチ上のアプレットを見ることができます。

12. QRコードをスキャンし、写真を撮り、フォトアルバムを撮ります

コードのスキャン、写真やフォトアルバムの撮影などの機能をアプレットで実現するには、WeChat が提供する API インターフェイスを使用できます。具体的な実装方法は以下の通りです。
1. コードをスキャンするには
カメラの許可を取得する必要があります。ユーザー認証は、wx.authorize インターフェイスを通じてリクエストするか、app.json ファイルで設定できます。"permission": {"scope.camera": {"desc": "用于扫码"}}

scanCode: function() {
    wx.scanCode({
      onlyFromCamera: true,
      success(res) {
        console.log('扫码成功', res.result)
      },
      fail(res) {
        console.log('扫码失败', res)
      }
    })
  }

2. 写真を撮るに
はカメラの許可へのアクセスも必要です。

wx.chooseMedia({
      count: 1,
      sizeType: ['original'],
      sourceType: ['camera'],
      success(res) {
        console.log('选择照片成功', res.tempFilePaths)
      },
      fail(res) {
        console.log('选择照片失败', res)
      }
    })

3. フォトアルバム
フォトアルバムへのアクセス許可を取得する必要があります。ユーザー認証は、wx.authorize インターフェイスを通じてリクエストするか、app.json ファイルで設定できます。"permission": {"scope.writePhotosAlbum": {"desc": "用于保存图片到相册"}}

wx.chooseMedia({
      count: 1,
      sizeType: ['original'],
      sourceType: ['album'],
      success(res) {
        console.log('选择照片成功', res.tempFilePaths)
      },
      fail(res) {
        console.log('选择照片失败', res)
      }
    })

13. カスタマーサービスの設定

移動: Wechat アプレット アクセス カスタマー サービス機能

14. APIのカプセル化

同じディレクトリの下に新しいフォルダー API を作成します。1
. 新しい http.js を作成します。後のメンテナンスのために BaseUrl を定義します。2
. 新しい request.js を作成します。

import { baseUrl } from "./http"
import storage from "../utils/storage";
module.exports={
  request:function(url, method, data){
    let fullUrl = `${baseUrl}${url}`;
    let token = storage.get('token');
    wx.showLoading({ title: '数据请求中' });
    return new Promise((resolve,reject)=>{
      wx.request({
        url: fullUrl,
        method,
        data,
        header:{
          'content-type': 'application/json', 
          'Authorization': 'Bearer' + token
        },
        success(res){
          wx.hideLoading();
          if(res.data.status == 200){
            resolve(res.data);
          }else if(res.data.status == 401){
            wx.showToast({
              title: '登录失效',
              icon: "none"
            })
            wx.reLaunch({
              url: '/pages/login/index',
            })
          }else{
            wx.showToast({
              title: res.data.message,
              icon: "none"
            })
            reject(res.data.message);
          }
        },
        fail(err){
          wx.reLaunch({
            url: '/pages/login/index',
          })
          wx.hideLoading();
          wx.showToast({
            title: err.errMsg,
            icon: "none"
          })
          reject(err);
        }
      })
    })
  }
}

3. 新しいモジュール API ファイル (user_api) を作成します

import { request } from "./request"
module.exports = {
  user: (data) => request("user","get",data)
}

4. ページ呼び出し

const user_api = require("../../api/user_api");
user_api.user(data).then(res=>{
      console.log(res)
})

15. ローカルストレージパッケージ

utils フォルダーの下に storage.js ファイルを作成します。

/**
 - 同步新增：get(key)
 - 同步修改、删除：set(key,value)；只传递 key 就可以删除对应的key：value
 - 同步清空：clear()
*/
export default class storage {
  //同步获取
  static get(key){
    if(!key) return null;
    return wx.getStorageSync(key);
  }
  //同步存储、删除
  static set(key, value){
    if(!key) return;
    if(value == null || value == 'undefined'){
      return wx.removeStorageSync(key);
    }else{
      return wx.setStorageSync(key, value);
    }
  }
  //同步清空
  static clear(){
    return wx.clearStorageSync();
  }
}

16. 底部安全距離コンポーネント

env (safe-area-inset-botton) を使用して、グローバル コンポーネントをセーフにカプセル化します。

<!--全局组件：底部安全距离-->
<view style="padding-bottom: env(safe-area-inset-botton);">
  <solt></solt>
</view>

17. フォーム検証ツールパッケージ

カプセル化検証ツールクラス

// 表单校验工具
export class validator {
  constructor(rules){
    this.rules = rules
    this.error= []
  }
  
  validate(form){
    this.error = [];
    Object.keys(form).forEach(key=>{
      let rule = this.rules[key];
      let required = this.rules[key].required;
      let message = this.rules[key].message;
      let maxLength = this.rules[key].maxLength;
      let fn = this.rules[key].fn;
      if(rule){
        if(required && !this.checkValue(form[key]) && !Array.isArray(form[key])){
          return this.error.push(message || ('请填写'+key));
        }
        //校验key是数组
        if(required && this.checkValueArr(form[key]).isNull && Array.isArray(form[key])){
          return this.error.push(message || (`请完善${this.checkValueArr(form[key]).key}信息`));
        }
        if(maxLength && this.max(form[key], maxLength)){
          return this.error.push(`最多可输入${maxLength}个字！`);
        }
      }
    })
    return this.error;
  }
  checkValueArr(arr){
    let isNull = false;
    let key = null;
    for(let i in arr){
      if(!arr[i].value){
        isNull = true;
        key = arr[i].name;
        break;
      }
    }
    return {isNull,key}
  }
  checkValue(value){
    return value.toString().length > 0;
  }
  max(value, maxLength){
    return value && value.length > maxLength;
  }
}

ページの使用

let rules = {
  test:{
    required:true,
    message:"请输入用户名"
  }
}
let fromVal = new validator(rules);

新規の場合はクラス class を使用してルールを渡し、検証を送信するときに次の操作を実行して、検証用のフォーム データを渡します。

let err = fromVal.validate(this.data.form);

上記は先人のアイデアをもとに、私が独自のプロジェクトに従ってまとめた方法です。

18. リッチテキストエディタエディタ

editor はアプレットによって提供されるコンポーネントであり、EditorContext API と連携してツールバーの操作を実現します。

<!--富文本编辑器-->
<view style="margin: 20rpx; background: #f0f0f0;">
  <view style="display: flex; justify-content: space-around; padding-bottom: 20rpx;">
    <view class="item" bindtap="format" data-type="bold">加粗</view>
    <view class="item" bindtap="format" data-type="italic">斜体</view>
    <view class="item" bindtap="format" data-type="underline">下划线</view>
    <view class="item" bindtap="undo">撤回</view>
    <view class="item" bindtap="redo">恢复</view>
    <view class="item" bindtap="insertImg">插入图片</view>
    <view class="item" bindtap="clear">删除</view>
  </view>
  <editor 
  style="border-radius: 10rpx; border: 1rpx solid #ccc; background: #fff;"
  id="myEditor"
  placeholder="请输入"
  bindstatuschange="statusChange"
  bindready="onEditorReady"
  ></editor>
</view>
<van-button bindtap="submit">提交</van-button>

Component({
  properties: {

  },
  data: {
    editorCtx:''
  },
  methods: {
    // 初始化，获取到编辑器节点，缓存在data中，方便下面操作
    onEditorReady(){
      let that = this;
      let query = wx.createSelectorQuery();
      query.in(that).select("#myEditor").context();
      query.exec(res=>{
        that.editorCtx = res[0].context;
      })
    },
    undo(){
      console.log(1)
      this.editorCtx.undo();
    },
    redo(){
      this.editorCtx.redo()
    },
    insertImg(){
      let that = this;
      wx.chooseMedia({
        count:1,
        mediaType:["image"],
        sourceType:["album"],
        success(res){
          that.editorCtx.insertImage({
            src:res.tempFiles[0].tempFilePath
          })
        }
      })
    },
    clear(){
      this.editorCtx.clear()
    },
    submit(){
      this.editorCtx.getContents({
        success(res){
          console.log(res)
        }
      })
    },
    format(e){
      let type = e.currentTarget.dataset.type;
      this.editorCtx.format(`${type}`)
    }
  }
})

19. アプレットは前のページのコンテンツをどのように操作しますか

back(){
    const pages = getCurrentPages();
    const prePage = pages[pages.length-2];
    console.log(prePage)
    prePage.setData({
      msg:'sssss'
    })
    wx.navigateBack();
  }

前のページを聞きたい場合は、後で前のページのメソッドを呼び出すことができます。

他の

1. 一部の IOS モデルの循環リストの 33 番目の要素でアプレットの境界線が消えます。

1rpx 一部の IOS モデルでは描画ピクセル数が比較的低く、表示されない場合があります。1px に設定すると、境界線を拡大縮小できます。

2. 複数行の全体的なレイアウトに flex: 1 を使用すると、ページが少し乱雑になります。

この 1 は親要素の幅ではなく残りのスペースに割り当てられるため、複数行の全体的なレイアウトには flex:1 の使用を避けるようにしてください。

3. アプレットはオブジェクトのプロパティを変更します

let c = `arr[${i}].name`
this.setData({
	"obj.a":b,
	[c]:d
})

4. アプレットは泡立ちを防ぎます

catchtap を使用してイベントをバインドします。

5. ミニプログラムのライフサイクルシーケンス

アプリケーション: onLaunch onShow
ページ: onLoad onShow onReady
コンポーネント:attached() ->ready() ->moved() ->detached()

6. 小規模プログラムの動的バインディング

class="name {
   
   {isOk?'a':'b'}}"
style="height:{
   
   {nav}}rpx"

7. アプレットの dom ノード情報を取得します。

ページ：

var query = wx.createSelectorQuery();
query.select('.header').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec((res) => {
	var listHeight = res[0].height; // 获取list高度
	this.setData({
		height:listHeight
	})
})

コンポーネント:

var query = wx.createSelectorQuery().in(this);
query.select('.header').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec((res) => {
	var listHeight = res[0].height; // 获取list高度
	this.setData({
		height:listHeight
	})
})

メソッドは準備完了サイクルに入りますが、まだ使用できない場合はタイマーでラップされます。

8. アプレットシミュレーターではカスタムコンポーネントの表示に問題はないが、実機では問題がない

コンポーネントjsonに「コンポーネント」を追加：true

9. アプレット インターフェイス データを開くための最初のスキャン コードは空白ですが、デバッグ モードがオンになっている場合は正常に表示できます。

アプレットのバックグラウンドでサーバーのドメイン名を有効なドメイン名として構成するだけで済みます。

10. スキャン コード リンクを使用してアプレットを開く場合、設定されたテスト アカウントは現在のリクエストのアドレス、パラメータ、およびパラメータ値と完全に一致している必要があります。そうでない場合、コードが 404 までスキャンされる可能性があります。

11. キャンバスの優先度が高すぎるため、他のラベルの問題がカバーされます

1. uni-app が提供する cover-view、cover-image などのタグを使用する;
2. Canvas タグに表示/非表示の判定制御を与える; 3.

12. ミニプログラムカスタムヘッダー

構成で NavigationStyle:custom を設定します。ネイティブとユニアプリには違いがあります。デバイス ヘッダー情報を取得します。uni.getSystemInfo({})、ステータス バーの高さ、ナビゲーション バーの高さを取得します。

13. 小さなプログラムのライフサイクルとジャンプ

1. ジャンプ方法の違い

navigateTo: 次のページにジャンプし、現在のページを維持します。navigateBack
: 現在のページを閉じ、前のページにジャンプします。redirectTo
: 現在のページを閉じ、他のページにジャンプします。reLaunch
: すべてのページを閉じ、特定のページにジャンプします。
switchTab: tabBar 以外のページをすべて閉じて、tabBar ページにジャンプします。パスにはパラメータを含めることはできません。

現在のページを取得するには、js の getCurrentPages() メソッドを使用します。

2. ライフサイクル

onLaunch: アプレットの初期化の完了によってトリガーされ、1 回だけ (ユーザー情報を取得)
onShow: アプレットの起動によってトリガーされ、バックグラウンドがフォアグラウンドに入る;
onHide: アプレットがフォアグラウンドからバックグラウンドに入るによってトリガー; onError :
エラー情報を収集し、

onLoad: ページの初期化によってトリガーされ、ページは 1 回だけ呼び出されます (リクエストの送信、データの初期化)
onShow: ページの表示によってトリガーされ、背景が前景になります; onReady:
ページの初期化によってトリガーされ、1 回だけ呼び出されます;
onHide: バックグラウンドへの切り替えによってトリガーされます;
onUnload: ページのアンロード トリガー;
onPullDownRefresh: ページ プルダウンの更新トリガー
onReachButton:

3. 二人の関係

navigateTo：onHide - onLoad - onShow - onReady
navigateBack：onUnload - onShow
redirectTo：onUnload - onLoad - onShow - onReady

14. アプレットはアクセス用の QR コードを生成します

ミニ プログラムの背景、右上隅 - ツール; コードをスキャンした後に入力したページ パスを入力します。

15. WeChat 開発者ツールはエンタープライズ WeChat をシミュレートします

Enterprise WeChat プラグイン (設定 - 拡張設定 - シミュレーター プラグイン - Enterprise WeChat シミュレーター) をダウンロードし、ミニプログラム モードを Enterprise WeChat ミニプログラム モードに調整します。

16. van-field を使用してアプレットをクリックすると、入力ボックスが最初にフォーカスを失い、次にもう一度クリックしてフォーカスしますが、これは開発ツールでは正常です。

van-field コンポーネントを使用すると、auto-focus または focus パラメーターが true に設定されているかどうかなど、コンポーネントの構成パラメーターが正しいかどうかを確認できます。

17.iosジャンプ失敗問題

ページがジャンプしますが、iOS は時々ジャンプに失敗し、navigateTo の成功したコールバックと完了したコールバックの両方を出力できます。具体的な理由は不明ですが、ネットワーク リクエストが結果を取得した後の 1 秒の遅延により、失敗の可能性が減少する可能性があります。しかしジャンプはまだ発生します 転送失敗のケース;
推測は非同期フォーカスに関連している可能性があります;
http://shop.jisuapp.cn/pecial/a79256.html

18. Vscode が WeChat アプレットを開発

プラグイン「WeChat アプレット プラグイン」をインストールし、WeChat 開発者ツールで小さなプログラム プロジェクトを作成し、vscode で開くと、コードを開発できます。