ミニプログラムについて-ミニプログラム開発-php.cn

ホームページ

WeChat アプレット

ミニプログラム開発

ミニプログラムについて

hzc

Jul 04, 2020 am 09:42 AM

アプレット

記事への注記。ぜひご相談ください。記事内に間違いがありましたらご指摘ください。

1. データ内の変数へのアクセスを必要とする一部の操作。 ES6 オブジェクトの構造化と代入を使用して簡素化できます。この方法は、小さなプログラムだけでなく、vue でも使用できます。

// 例子(小程序)
let a = this.data.a;
let b = this.data.b;
// ES6对象解构赋值
let {a,b} = this ; // vue
let {a,b} = this.data; //小程序

2. アプレットのコンポーネントの public プロパティ hidden が隠されているため、ドキュメントに注意しないとこの public プロパティを見逃してしまう可能性があります。 CSS の display:none と同等で、頻繁に切り替わるノードに適用できます。

<view></view>
 <!--  false 为显示   true为隐藏 -->

公式からの引用: 「一般的に、wx:if はスイッチングコストが高く、hidden は初期レンダリングコストが高くなります。したがって、頻繁に切り替える必要がある場合は、hidden を使用する方が良いでしょう。」実行時に条件が変化する可能性が低い場合は、wx:if の方が適しています。 "

3. 小さなプログラムを書き始めるときに wxml で書式設定を使用するテキストブロガーについて ## のドキュメント作成中に遭遇した落とし穴
#

<text>
    SevenDream 
    SevenDream 
</text>

<text>SevenDream SevenDream</text>

4. 画像について画像をレンダリングする必要がある場合、連続した画像の真ん中に白い継ぎ目が見つかることがあります。モール内の商品詳細でスライスすると真ん中に白い筋が入って見苦しくなります。画像タグにdisplay:bolckを追加するだけです。

<image></image>

ミニプログラムについて

5. ジャンプについて

最大ページスタック処理方式を超える場合(10ページ以上)、ジャンプが行われます。カプセル化されます。

//utils.js
export function navigateTo(url) {
   let Type = getCurrentPages().length >= 10 ? 'redirectTo' : 'navigateTo'
    return new Promise((resolve, reject) => {
      wx[Type]({
        url,
        success: res => {
          resolve()
        },
        fail: err => {
          reject(err)
        },
      })
    })
}
// 其他页面js
import {navigateTo} from '../../utils/utils';
navigateTo('pages/index/index')

#前のページに戻るとき (パーソナルセンターに戻るときなど) 更新します

wx.switchTab({
    url: '/pages/my/my',
    success:function(){
        var page  =  getCurrentPages().pop(); //当前页面
        page.onLoad(); // 调用 onload
    }})

前のページに戻るときに前のページの値を設定します

    var pages = getCurrentPages(); // 获取页面栈
    var prevPage = pages[pages.length - 2];  //上一页
    prevPage.setData(data);
    wx.navigateBack({
      delta: 1
    })

  //data
  data: {
    obj: {
      a: 1
    },
    array: ['1']
  },
  //改变对象
  setOBJ:function(){
    var name = 'a'
    var obj = 'obj.a'
    this.setData({
      [obj]:2
    })
  },
  //改变数组
  setArr: function () {
    var num = 0
    var arr = `array[${num}]`
    this.setData({
      [arr]: 2
    })
  }

多くのバインド入力にバインドする必要があるフォームがある場合は、上記の解決策を使用して data-* を追加します。多くのメソッドを記述する必要はありません。1 つだけで十分です。

  <input>
  <input>
  <input>

// 写入
  data:{
    FromOBJ:{
      name:'',
      phone:'',
      address:''
    }
  },
  onInput: function (e) {
      let name =  e.currentTarget.dataset.name
      let value = e.detail.value
      let valueObj = `FromOBJ.${name}`;
      this.setData({
        [valueObj]:value
      })
  }

//API.js
const HTTP_URL = 'https://xxxx.xxx.xxx/'

function Request(url, data={},method='get',ContentType='application/json;charset=utf-8') {
    return new Promise((resolve, reject) => {
        wx.request({
            url: HTTP_URL.http + url,
            method: method,
            header: {
                'Content-Type': ContentType,
                'xxxx': 'xxxx'  // 其他header头
            },
            data: data,
            success: function (res) {
                resolve(res.data)
            },
            fail: function (err) {
                reject(err)
            }
        })
    })
}

export function getApi(data) {
    var url = '/getapi';
    return Request(url, data)
}
// 其他页面js
import {getApi} from '../../utils/api';
getApi({a:1,b:2}).then(res=>console.log(res)).catch(err=>console.log(err))

8. その他の注意すべき問題

アイコンフォントが使用されている場合、すべてのファイルを一度に入れます0 iconfont.js は必ず削除してください。実機を使用するとエラーメッセージが表示されます。白い画面で読み込みに失敗します。

アニメーション効果を作成する場合は、公式のアニメーション API または CSS3 アニメーションを使用することをお勧めします。トランジションは慎重に使用してください。
最後に、投稿者が遭遇した落とし穴について話します（私の対処法が間違っているかもしれません）。地図コンポーネントレベルで高さ変更や幅変更のアニメーショントランジション効果を使用しないでください。WeChatアニメーションAPIとCSS3トランジションのアニメーション属性がスタックしてpptに表示されなくなります。問題を解決するには、（WeChat API、CSS3）「変換」を使用してみてください。
推奨チュートリアル: 「

」

以上がミニプログラムについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は简书で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。