uni-app開発ウィジェットのまとめ

最近の開発プロジェクトではuni-appを使用して微信ウィジェットを開発しましたが、体験全体がスムーズで、以下にまとめます.
HbuilderXインストール
HbuilderXのインストール時に標準版を選択し、アプリ開発版をダウンロードしないでください.uni-app編集は標準版の中でプラグインでインストールしたり、vue-cliコマンドラインで直接プロジェクトを作成したりすることができます.また、私個人が使用した後、アプリ開発版でウィジェットをコンパイルすると、コンパイルされたウィジェットのページが空白になることがあります(しか残っていません).
WeChat開発ツール
HbuilderX実行/パブリッシュマイクロ信ウィジェットは、コンパイルが完了すると、マイクロ信開発者ツールを開こうとします.実際には、開発者ツールの設定->セキュリティ設定でサービスポートを開く必要があるマイクロ信開発者ツール(コマンドラインV 2)をコマンドラインで制御します.
プロジェクトの作成
HbuilderXビジュアル化インタフェースとvue-cliコマンドラインの2つの方法でプロジェクトを作成できますが、cli版ではless、scss、tsなどのコンパイラをインストールするには、自分で手動でnpmインストールする必要があります.HbuilderXのプラグイン管理インタフェースのインストールは無効です.それはHbuilderXが作成したプロジェクトにのみ使用されます.
コードディレクトリ
HbuilderXのビジュアル化インタフェースで作成されたアイテム:

components:コンポーネントファイルで、宣言を導入せずに直接使用します.

pages:ページ

index:トップページ

static:静的リソース

store:グローバルステータス管理センター

unpackage:パッケージファイル

.gitignore:ファイルを無視し、unpackageファイルを一時的に無視

APP.vue:Appグローバルスタイルおよびリスニング

を構成するための構成を適用する.

main.js:Vue初期化エントリファイル

manifest.json:構成アプリケーション名、appid、logo、バージョンなどのパッケージ情報

pages.json:ページルーティング、ナビゲーションバー、タブなどのページクラス情報

の構成

uni.scss:全体制御アプリケーションのスタイル、https://uniapp.dcloud.io/coll...

mixins:

混入

utils:ツール、uni.requestおよびuni.uploadFileメソッドパッケージ

config:プロファイル

index.js:vue.config.js

に類似

theme.js:jsで使用するトピック構成

sitemap.json:構成ページがインデックスされているかどうか

完全なコードはhttps://github.com/vueBlog/bl...を表示できます
コードパッケージconfig -> index.js

export default {
  loginExpiredCode: '', //        code
  token: 'token', //          ，    token ，   token ，  token key
  publicPath: process.env.NODE_ENV === 'development' ? '' : '' //        
}

utils -> request.js uni.request uni.uploadFile

// uni.request   uni.uploadFile     
import store from '../store'
import config from '../config'

export function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: `${config.publicPath}${options.url}`, //         
      method: options.method,
      header: options.header || {
        'content-type': 'application/json',
        'token': store.state.token
      },
      data: options.data || {},
      success(res) {
        /**
         * https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
         * uni.showLoading   uni.showToast         
         *               uni.showLoading ，      uni.hideLoading() ，          
         */ 
        uni.hideLoading()
        if (res.statusCode === 200) {
          // code         
          if (res.data.code === 0) {
            resolve(res.data)
          } else {
            //             msg，  uni.showToast
            uni.showToast({
              title: res.data.msg,
              icon: 'none'
            })
            //      code         ，         
            if(res.data.code === config.loginExpiredCode) {
              //     Storage token
              uni.removeStorageSync(config.token)
              // uni.showToast      1500ms ，         
              setTimeout(() => {
                uni.reLaunch({
                  url: 'pages/login/index'
                })
              }, 1500)
            }
            reject(res.data)
          }
        } else {
          // statusCode    200            statusCode
          uni.showToast({
            title: `    : ${res.statusCode}`,
            icon: 'none'
          })
        }
      },
      fail(err) {
        uni.hideLoading()
        uni.showToast({
          title: '    ',
          icon: 'none'
        })
        reject(err)
      }
    })
  })
}

export function upload(options) {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: `${config.publicPath}${options.url}`,
      filePath: options.filePath,
      name: options.name,
      formData: options.formData || {},
      header: {
        'content-type': 'multipart/form-data',
        'token': store.state.token
      },
      success(result) {
        uni.hideLoading()
        if (result.statusCode === 200) {
          /**
           * https://uniapp.dcloud.io/api/request/network-file
           * data    String               
           */
          const res = JSON.parse(result.data)
          if (res.code === 0) {
            resolve(res)
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
            if(res.code === config.loginExpiredCode) {
              uni.removeStorageSync(config.token)
              setTimeout(() => {
                uni.reLaunch({
                  url: 'pages/login/index'
                })
              }, 1500)
            }
            reject(res)
          }
        } else {
          uni.showToast({
            title: `    : ${result.statusCode}`,
            icon: 'none'
          })
        }
      },
      fail(err) {
        uni.hideLoading()
        uni.showToast({
          title: '    ',
          icon: 'none'
        })
        reject(err)
      }
    })
  })
}

ネットワークモニタリング
私はグローバルにネットの監視を置いて、ネットを切った時間にネットの弾窓を弾いて操作を禁止して、再びネットに接続する時間、弾窓を閉じます.App.vue :

export default {
    onLaunch: function() {
        console.log('App Launch');
        uni.onNetworkStatusChange(({isConnected}) => {
      if (isConnected) {
        uni.hideToast()
      } else {
        uni.hideToast()
        uni.showToast({
          title: '    ',
          icon: 'none',
          mask: true,
          duration: 6000000
        })
      }
    })
    },
    onShow: function() {
        console.log('App Show');
    },
    onHide: function() {
        console.log('App Hide');
    }
};

直面したいくつかの問題と解決方法

微信ウィジェットのユーザーは、ポップアップウィンドウを許可し、ユーザー情報を取得します。ユーザーが権限を拒否した場合、ユーザーを再権限に導く

ウィジェットが携帯電話番号を取得して解読に失敗したピットの過程について