小型マイクロチャネルのアプリケーション開発 - 個人的な概要

小型マイクロチャネルプログラム開発の概要

基础的配置及视图层、逻辑层自己看文档  [微信小程序文档][1]

这里只说一下自己的经验总结

思い出させます

小型マイクロチャネルプログラムは、ブラウザで実行されません、あなたはドムを動作させることができない、何の文書、ウィンドウオブジェクトがありません

5までの各ページパス

eg:页面A->页面B->页面C->页面D->页面E->(页面F是跳转不出来的)
注:不经过redirect,redirect后的页面算是第一层,但是没有-返回-按钮

コンパイルされたときapp.json構成をルーティングのみを使用することができません外側鎖は、自動的にタグを除外しません

WX:WXを追加するループのレンダリング:キー、そうでない場合は警告を報告

<スクロールビュー>を使用する場合は、x軸のスクロールを行うには、高さプロパティを設定する、または開発ツールを購入し、携帯電話はあなたをふけるしないでください

表示データ、イベントのみ結合、WXに結合する場合:キー、WX:のためのインデックス、WX:のための項目、直接結合、{{}}、{{すべての他のIn結合}}を必要としませんバインディング

ページ内のapp.jsonは、好ましくはジャンプしないことがあり、他に従い、階層順に構成された、または

touchstart、touchendを使用する場合は、ストップバブリングに最善ではない、子供のタップイベントに影響を与えるバブリング防ぐために最善touchmove、親スクロールビューの影響を防ぐことができます

bindinputでの入力を使用して、最高のダイナミック設定値、本当に間違っアンドリュースに行くそうでない機会

表示素子ユニット

设计时最好让ui做成750px,开发中,ui是多少px,你写成多少rpx就OK了,原理,自己查文档去

ページのパラメータの受け渡し

<navigator url="/pages/detail/detail?id=2"></navigator>

Page({
    onLoad (opositions) {
        // 看看是不是你想要的
        console.log(opositions.id)
    }
})

表示応答

每个页面都有一个Page实例,响应就是该实例的setData方法触发的,
*直接给绑定数据赋值,数据会改变,但是视图不会渲染

js文件

    let config = {
        data: {}
    }
    Page(config)

イベントバインディング

wxml文件

    <view bindtap="tapHandler"></view>

js文件

    let config = {
        data: {},
        tapHandler () {
            console.log('i am a handler')
        }
    }

最終的には、メソッド名を結合bindtapに解析されるので、bindtap =「tapHandler(パラメータ)」、与えられている、----見つけることができませんでした「tapHandler(パラメータ)」この方法では、
幸いなことに、イベントバインディング機能、それは名前、クラス、およびその他の属性を、見つけるためにしようとしない、パラメータは、ID、データ・セットは、あなたが両方の結合特性を、それらを使用することができるために何年もかかることができ、パラメータを渡します役に立たない、ありません

共通コンポーネント

コンポーネントの3つの文書、wxml、JS、CSS

wxml文件定义template模版,页面里以import方式引入,这样能控制传入模版的数据
js文件exports一个对象,页面里以require方式引入,并且合并到Page实例化的配置对象中

    let tempateConfig = require('url')
    let mergeConfig = require('url/wxTools.js')['mergeConfig']

    let config = {
        data: {}
    }
    config = mergeConfig(config, templateConfig)
    Page(config)

mergeConfig単純なオブジェクトを支持複数、マルチオブジェクト統合、それらを組み合わせた関数によって定義される
所定のアンドリュースの実マシン上でObject.assign()メソッドを実行すると、使用できません

wxTools.js
    
    function merge (con, mcon) {
        for (var key in mcon) {
            if (typeof mcon[key] == 'object' && con[key]) {
                merge(con[key], mcon[key])
            } else {
                con[key] = mcon[key]
            }
        }
    
        return con
    }
    
    function mergeConfig () {
        let config = {}
        for (var i = 0, len = arguments.length; i < len; i++) {
            config = merge(config, arguments[i])
        }
        return config
    }
    
    module.exports = {
        mergeConfig: mergeConfig
    }
css文件以@import方式导入

開発スキル

1.アンカー
<ナビゲーター>唯一のルートapp.json URL内の設定のみクエリ文字列をサポートし、ハッシュをサポートしていません、それはアンカーをリンクすることによって行うことができません。
いくつかのマイクロチャネルは、<スクロールビュー>提供次のように実装します:

wxml文件

    <view>
        <button data-hash="hash1" bindtap="goHash">点击定向hash1</button>
        <button data-hash="hash2" bindtap="goHash">点击定向hash2</button>
    </view>
    <scroll-view scroll-y="true" scroll-into-view="{{toView}}">
        <view id="hash1"></view>
        <view id="hash2"></view>
    </scroll-view>

js文件

    Page({
        data: {
            toView: 'hash1'
        },
        goHash (e) {
            let hash = e.currentTarget.dataset.hash
            this.setData({
                toView: hash
            })
        }
    })

しかし、これはあなたがbindscrollのダイナミックイベント関連データを取得し、最終的にできるようにすることができた場合にのみ対応するアンカーに画面をスライドさせ、ボタン、ジャンプアンカーをクリックし、toViewプロパティは、当然のことながら、それに応じて変更されていない、一つの方法でありますtoViewはありません、他は言った上で、計算されますが、幅の広い高、私は申し訳ありませんが、マイクロチャネルDOMは完売してるものを操作するDOM要素を取得する必要はありません。

2.スクロールがロードされていない
あなたはonscroll使用し、どのようにそれを行うにはしていないので、何の文書、ウィンドウオブジェクトマイクロ手紙を?
いくつかのマイクロチャネルは、<スクロールビュー>提供次のように実装します:

wxml文件

    <scroll-view scroll-y="true" scroll-into-view="{{toView}}" bindscrolltolower=“loadMovies”>
        <view wx:for="{{movies}}" wx:key="index">
            {{item.name}}
        </view>
    </scroll-view>

js文件

    Page({
        data: {
            movies: []
        },
        getMovies () {
            let _self = this
            wx.request({
              url: 'https://......',
              data: {},
              success: function(res) {
                // res.data才是你后端返回的真实数据
                _self.setData({
                    movies: res.data
                })
              }
            })
        },
        loadMovies () {
            // 得到要更新的数据,setData重置movies
        }
    })

遅延読み込みを行うことができます、あなたはまた、事前にロードされ、彼らはそれをしたい特定のロジックを行うことができます


これらの一時的な友人。最後に、あなたがたは、チェーンの外にそれをサポートしていない、1を訴え、リード共有コンポーネントがたそんなにトラブルに

おすすめ

転載: www.cnblogs.com/jlfw/p/12570898.html