weapp
v2
WeChat ミニ プログラム コンポーネントと関数のカプセル化、シンプルなコンポーネント プログラミング
WeChat のコンポーネント カスタム コンポーネントのカプセル化、単純なコンポーネント プログラミングに基づいて、コンポーネント カスタム コンポーネントについてはコンポーネント API を参照してください。
WeChat 開発者ツールで ES6 から ES5 への変換機能を有効にする必要があることに注意してください。バージョン1.6.3以降のミニ プログラム ベース ライブラリを使用し、WeChat を最新バージョンに更新してください。
WeChat アプレットと Alipay アプレットを開発するために一連のコードが必要な場合は、mpapi プラグインが役立つ場合があります (WeChat アプレットと Alipay アプレット API 互換プラグイン)
WeChat 開発者ツールを使用してsrcディレクトリを開いてください。
├─images ---------- 公共图片
├─js -------------- 公共的JS
│ └─common ---------- 公共方法函数封装
├─components ------ 自定义组件和第三方组件
│ ├─libs ------------ 第三方库
│ └─weapp ----------- weapp组件
├─pages ----------- 页面目录
│ ├─index ----------- 首页
│ ├─libs ------------ 第三方库页面
│ └─weapp ----------- weapp组件页面
├─app.js
├─app.json
├─app.wxss
└─README.md
usingComponentsの参照ステートメントを構成する必要があります。 // page.json
{
"usingComponents" : {
"weapp-toast" : "/components/weapp/toast/toast" ,
"weapp-tab" : "/components/weapp/tab/tab"
}
} <!-- page.wxml-->
< weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />以下にTabコンポーネントの簡単な使用法を示します。具体的な例については、プロジェクト内のpages/weapp/tabのコードを参照してください。他のタイプのコンポーネントの使用は、基本的にこの呼び出しメソッドと同様です。
// tab.json
{
"navigationBarTitleText" : "Tab" ,
"usingComponents" : {
"weapp-tab" : "/components/weapp/tab/tab"
}
} <!-- tab.wxml -->
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " /> // tab.js
Page ( {
data : {
list1 : [ '选项1' , '选项2' , '选项3' ]
} ,
handlerSelect ( ) {
this . setData ( {
activeIndex : 1
} ) ;
} ,
onTabChange ( event ) {
console . log ( event . detail . activeIndex )
}
} ) モバイル開発で一般的に使用される Toast コンポーネントであるフローティング プロンプトは、ミニ プログラムの showToast とは異なります。
titleプロンプト情報delay自動シャットダウンの遅延時間 (ミリ秒単位)、デフォルト: 1500 hideを閉じた後のコールバック < weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />タブ
listタブのタイトルactive-index選択されたインデックス、デフォルト: 0themeテーマ スタイル (デフォルトでは空) は、 weapp-tabまたは他のカスタム スタイルに渡すことができますchange event 、 event.detail.activeIndexは現在選択されているインデックスです < weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />都市の選択
regionプロンプト情報change 。パラメータは、 eventですevent.detail.regionは、選択された領域の情報です。 < weapp-city-picker show =" {{isCityPickerShow}} " bind:change =" onChangeCity " />さらにロードします。データプロンプトはありません。通常はプルアップデータリストとともに使用されます。
icon-typeアプレット アイコン コンポーネントのタイプ、デフォルト: searchstatus現在のステータス、オプションの値： loading 、 nomore 、 empty 、データはまだありません、デフォルト： loadingempty-txtはデータ プロンプト テキストがありません。デフォルト:暂无数据loading-txt読み込みプロンプトテキスト、デフォルト:正在加载nomore-txtはプロンプト テキストがありません。デフォルト:没有更多数据了 < weapp-loader status =" {{status}} " />最大 12 個の矢印方向をサポートするポップアップ メニューで、ほとんどのシナリオに対応します。 
listpage-selectorページ全体の最も外側のコンテナーの CSS セレクター。デフォルトは.pageです。elem-idが要素の ID に従って配置されるかdir矢印の方向、オプションの値tl tc tr rt rc rb bl bc br lt lc lb 、それぞれ上、右、下、左、中央の 12 の組み合わせた方向を表しますtl top-leftに相当しますtc top-centerに相当しますtr top-rightに対応しますrt right-topに対応しますrc right-centerに対応しますrb right-bottomに対応しますbl bottom-leftに相当しますbc bottom-centerに相当しますbr bottom-rightに相当しますleft-topに対応しltlc left-centerに対応しますlb left-bottomに相当しますselect 。パラメータはevent event.detail.itemは現在選択されているアイテムです。showhide < weapp-popover list =" {{list}} " dir =" {{dir}} " elem-id =" {{elemId}} " show =" {{show}} " bind:select =" onSelectPopover " />重要なヒント
titleプロンプト情報type種類、 success 、 error 、 warn 、デフォルト: defaultdelay自動シャットダウンの遅延時間 (ミリ秒単位)、デフォルト: 1500 hideを閉じた後のコールバック < weapp-toptip type =" {{ type }} " title =" {{ title }} " />カレンダー選択は複数月のスライド切り替え表示に対応しており、左右クリックで月を切り替えたり、今日に切り替えたりできます。 
start-date開始日end-date終了日current-dateデフォルトで選択された日付show表示するかどうか、デフォルト: falsecurrentデフォルトで最初の月を表示します。デフォルトは0です。 event change 。ここで、 event.detail.currentDateは現在選択されている日付です。 < weapp-calendar-picker start-date =" 2017-07-07 " end-date =" 2018-08-08 " show =" {{ isCalendarPickerShow }} " bind:change =" onChangeDate " />ページの転送と共有により、各ページの複雑な構成が不要になり、ページ受け渡しパラメーター オプションがサポートされ、より簡単かつ効率的に使用できるようになります。
title表示されるタイトルurlによって転送されるページアドレス。デフォルトは現在のページアドレスです。 import common from '../../assets/js/common' ;
// common.share([title], [url])
Page ( {
onShareAppMessage : common . share ( )
} ) ;型判定、 Number 、 String 、 Boolean 、 Array 、 Object 、 Functionなどの型文字列を返す
value判断する必要があるパラメータです。 import common from '../../assets/js/common' ;
// common.type([value])
common . type ( 1 ) ; // Number
common . type ( 'abc' ) ; // String
common . type ( true ) ; // Boolean
common . type ( [ ] ) ; // Array
common . type ( { } ) ; // Object
common . type ( function ( ) { } ) ; // Function
common . type ( / d / ) ; // RegExp
common . type ( new Date ( ) ) ; // Dateオブジェクトを URL 文字列に解析します
urlObjectパラメータ オブジェクト、文字列パラメータに変換されるオブジェクトunEncodeURIエンコードを使用せず、デフォルトでencodeURIComponentが使用されます。 import common from '../../assets/js/common' ;
// common.param([urlObject], [unEncodeURI])
let obj = {
name : 'weapp' ,
uid : 8 ,
age : 24
} ;
let params = common . param ( obj ) ;
console . log ( params ) ; // ?name=weapp&uid=8&age=24 common.paramを使用するのではなく、URL 文字列をオブジェクトに解析します。
urlStringアドレス、URL パラメータを含むアドレスunDecodeURIデコードを使用せず、デフォルトでdecodeURIComponentを使用します。 import common from '../../assets/js/common' ;
// common.unparam([urlString], [unDecodeURI])
let str = '?name=weapp&uid=8&age=24' ;
let obj = common . unparam ( str ) ;ページ ジャンプは、クイック クリックで 2 ページが開かれないように最適化されており、ミニ プログラムの wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch にそれぞれ対応する、URL パラメータを渡すためのオブジェクト フォームをサポートしています。
urlページアドレスparamsページパラメータオブジェクト import common from '../../assets/js/common' ;
// common.navigateTo([url], [params])
Page ( {
onTapElem ( ) {
common . navigateTo ( '/pages/weapp/popover/popover' , {
userid : 123 ,
info : 'Hello,weapp'
} ) ;
}
} ) ; フォント アイコンには FontAwesome を使用し、CSS コンポーネント スタイルには WeUI を使用します。
MIT の皆さん、オープンソースの楽しさを楽しんでください。
