WeChatウィジェットKFC
10208 ワード
ウィジェット?大きなシーン?
インスタンスソース
微信ウィジェットは本質的にHTML 5(モバイルページ)アプリケーションであり、divラベルなどの代わりにview、scoll-viewを用い、スープを交換して薬を交換しない.微信で実行すると、微信ウィジェットはより多くのシステム権限を取得します.まずデータキャッシュ能力です.これにより、ユーザーは小さなプログラムを開くときにプログラムのメインフレームワークを微信にキャッシュすることができ、次は迅速に開くことができます.微信の創始者である張小龍氏は、微信アプリ番号が実現したい目標は「使い終わったらすぐに行け、インストールやアンインストールを必要としない」と述べた.つまり、今後、アプリケーションを使用する場合は、微信で検索するだけで直接使用することができる.例えば、摩拝、美団などの小型低周波のappでこの技術を使用すると、開発コストを大幅に節約することができる.最近では、個人開発や公衆番号関連プッシュの開放が強化され、使用シーンは侮れない.
手を出して何をしますか.
私が1枚の食べ物を食べるため、家の前に1家のKFCがあって、以前KFCのappはいつもいくつか福祉の巻があって、この便利でお得なappを使い慣れた以上、そこでそれをしました.本題に戻って、まず一歩一歩何をすべきかを分析して、小さなdemoをすると達成感がいっぱいです.
完了した機能:
近隣位置選択-連動メニューナビゲーション-アナログデータ-引き出し式カート-ユーザー微信情報の取得-ページ転送-データ生成注文
体験アドレス
体験点私、比較的に大きくて、辛抱強く2333を待ってください、cloneは下りて現地で55555～を走ったほうがいいです
http://xurenjie.cn:3000/img/KFC/KFC_gif.gif
すみません!GIFはあまりにもカードが多すぎて、簡単なcloneが降りて地元で走る効果は最も良い直接食事を注文して自動的にあなたのために最も近いレストランを見つけることができて、しかし最も近いkfcから遠すぎてあまりよくありません
使用するツールとドキュメント:
1. 開発デバッグツール:微信ウィジェットプラットフォームチュートリアル、インストールが最も基本的です!簡易文書を少し書き直す.
2. 「辞書」ドキュメントの開発:微信ウィジェット開発チュートリアルマニュアルドキュメントの機能使用方法はすべて上にあります.ドキュメントを読むことで、ページの構築、ページルーティング、ナビゲーションジャンプ、データバインド、条件レンダリング、リストレンダリング、scroll-view、request、radio、modal、toast、map、位置、データキャッシュ、アニメーション、検証情報を理解します.
3. easy-mock:easy-mockはバックエンドデータをシミュレートし、構成について簡単に説明します.
4. テンセント地図API:テンセント地図ウィジェットには、場所検索、キーワード入力ヒント、逆アドレス解析(座標位置記述)アドレス解析(アドレス回転座標)距離計算、都市リスト取得、都市区県取得の一歩配置チュートリアルがある.
5. WeUI WeUI github微信専用の構造スタイルコンポーネントライブラリ、開発速度の加速、BEM仕様コード、可読性の向上
ディレクトリ構造
ページ登録
app.json
公式サイトのドキュメントやW 3 Cチュートリアルでウィジェットディレクトリを初期化することができます.ウィジェットの各ページはpagesディレクトリの下に置かれています.新しいページを追加するたびにappが必要です.json.pageの下に登録します.
データシミュレーション
mock.js大紅大紫、フロントエンドをバックエンドから独立させ、KFCデータをシミュレートするのによく分からない学生は参考にすることができます.
1.mockjsフロントエンド開発バックエンドとは独立
2.掘金:easy-mock
3. mock.jsの件
easy-mockデータの作成
メニュー内の各左側の分類はデータのセットに対応するため、右側でもクラス名をレンダリングする必要があるため、単純なシミュレーション構造
自分でケンタッキーをかき集めて注文したり、私がかき混ぜたケンタッキーAPIを使ってみたりすることができます.
地図APIの使用
アプレットマップ初期化
toastによる時間のかかるロードの最適化
})
図面が完成したらコールバックでToastを除去
WXML:
テンセント地図API使用-逆アドレス解析
近くの場所を検索してページリストにレンダリングする例
コアクラステンセント地図ウィジェット版を導入してjsをダウンロードしkey を取得する
APIreverseGeocoder を呼び出す
setData()を介して私たちのデータがdataに転送されます.このレンダリングページを使用して、thatは元のpageオブジェクトへの参照を維持します.
地名検索
周囲を捜すKFCを例に
スープを交換して薬を交換しないコアはやはりsetDataを通じてdataを変えてページに現在のkfcを表示させて、入力ボックスで検索していないで、設定の自動で検索します
カート部分実装
必要な機能:
側navとコンテンツ領域との連動商品の増減は総価格を変更し、ショッピングカートと引き出しの詳細パネルをポップアップする.
引き出しのアニメーション引き出しパネルにおいて商品数を変更する、なければ隠しユニット.
具体的な実装プロセス
側navとコンテンツ領域の連動
gifが爆発したら下の部分の図を直接見て、下のショッピングカートを無視しましょう.
左はメニューの異なる種類をクリックし、右は対応するコンテンツに移動します.ここでの実装では、scroll-viewのAPIを使用して右のコンテンツオブジェクトごとにレンダリングするときにidを添付します.
各navのクリックイベントdatasetを解析します
引き出し式ショッピングカート
私がここでやっているのは、各商品にdatasetを付与し、異なる商品をクリックして異なるオブジェクトをカートの配列に入れ、e.targetを通過することです.Dataset入手
アニメーションの使用
APIを参照してください私はここで商品を増やした时、引き出しを上にスクロールして、削除して空の时引き出しを下にスクロールします
アニメーションの初期設定をスクロール
アニメーションの効果はbottomの変化によって発生します
アニメーションシーケンスを追加し、movelengthを設定します.
ページ値
現在、本白が知っている伝値は3種類あります.
1. グローバルなデータキャッシュを設定してこのAPIを見てください
2. url付帯文字列伝値
参考大物掘金微信小プログラム多ページ伝参通信の探索と実践
3. イベントの購読と配布を導入するonfire.js(最近は
例えばこのページでは、そのすべてのデータが以前の選択に来ています.私は自分のプロジェクトで現在ローカルに保存されている方法を使っています.例えば、アドレスの設定取得などです.
選択ページでのローカルストレージの設定
注文ページで住所をもらって、apiに対して多consoleに詳しくありません.log数回、何も解决できないことはありません～
最後に踏んだ穴をまとめます
1. まだrpxに行っていないので:本物のスタイルに差があります;同じ数行のテキストを設定しても、高さは一致しません.
2. テンセントの地図の大きい穴z-index、もともと地図のapiで1つの検索の自動のヒントをしたいと思って、しかし描いた地図は微信の内蔵で、z-indexはどんなに高くても地図の上で覆うことができなくて、解決方法は別のページに飛び込んで処理します
3. 合法的なドメイン名を申請する必要があります.要求には合法的なドメイン名に数の制限があります.
4. ページ内ジャンプは5級を超えてはいけません.
インスタンスソース
微信ウィジェットは本質的にHTML 5(モバイルページ)アプリケーションであり、divラベルなどの代わりにview、scoll-viewを用い、スープを交換して薬を交換しない.微信で実行すると、微信ウィジェットはより多くのシステム権限を取得します.まずデータキャッシュ能力です.これにより、ユーザーは小さなプログラムを開くときにプログラムのメインフレームワークを微信にキャッシュすることができ、次は迅速に開くことができます.微信の創始者である張小龍氏は、微信アプリ番号が実現したい目標は「使い終わったらすぐに行け、インストールやアンインストールを必要としない」と述べた.つまり、今後、アプリケーションを使用する場合は、微信で検索するだけで直接使用することができる.例えば、摩拝、美団などの小型低周波のappでこの技術を使用すると、開発コストを大幅に節約することができる.最近では、個人開発や公衆番号関連プッシュの開放が強化され、使用シーンは侮れない.
手を出して何をしますか.
私が1枚の食べ物を食べるため、家の前に1家のKFCがあって、以前KFCのappはいつもいくつか福祉の巻があって、この便利でお得なappを使い慣れた以上、そこでそれをしました.本題に戻って、まず一歩一歩何をすべきかを分析して、小さなdemoをすると達成感がいっぱいです.
完了した機能:
近隣位置選択-連動メニューナビゲーション-アナログデータ-引き出し式カート-ユーザー微信情報の取得-ページ転送-データ生成注文
体験アドレス
体験点私、比較的に大きくて、辛抱強く2333を待ってください、cloneは下りて現地で55555～を走ったほうがいいです
http://xurenjie.cn:3000/img/KFC/KFC_gif.gif
すみません!GIFはあまりにもカードが多すぎて、簡単なcloneが降りて地元で走る効果は最も良い直接食事を注文して自動的にあなたのために最も近いレストランを見つけることができて、しかし最も近いkfcから遠すぎてあまりよくありません
使用するツールとドキュメント:
1. 開発デバッグツール:微信ウィジェットプラットフォームチュートリアル、インストールが最も基本的です!簡易文書を少し書き直す.
2. 「辞書」ドキュメントの開発:微信ウィジェット開発チュートリアルマニュアルドキュメントの機能使用方法はすべて上にあります.ドキュメントを読むことで、ページの構築、ページルーティング、ナビゲーションジャンプ、データバインド、条件レンダリング、リストレンダリング、scroll-view、request、radio、modal、toast、map、位置、データキャッシュ、アニメーション、検証情報を理解します.
3. easy-mock:easy-mockはバックエンドデータをシミュレートし、構成について簡単に説明します.
4. テンセント地図API:テンセント地図ウィジェットには、場所検索、キーワード入力ヒント、逆アドレス解析(座標位置記述)アドレス解析(アドレス回転座標)距離計算、都市リスト取得、都市区県取得の一歩配置チュートリアルがある.
5. WeUI WeUI github微信専用の構造スタイルコンポーネントライブラリ、開発速度の加速、BEM仕様コード、可読性の向上
ディレクトリ構造
├── app.js
├── app.json
├── app.wxss
├── pages
│ ├── .DS_Store
│ ├── KFC
│ │ ├── KFC.js
│ │ ├── KFC.wxml
│ │ └── KFC.wxss
│ ├── card
│ │ ├── card.js
│ │ ├── card.wxml
│ │ └── card.wxss
│ ├── halladdress
│ │ ├── .DS_Store
│ │ ├── halladdress.js
│ │ ├── halladdress.wxml
│ │ └── halladdress.wxss
│ ├── index
│ │ ├── index.js
│ │ ├── index.wxml
│ │ └── index.wxss
│ ├── logs
│ │ ├── logs.js
│ │ ├── logs.json
│ │ ├── logs.wxml
│ │ └── logs.wxss
│ ├── menu
│ │ ├── index.html
│ │ ├── menu.js
│ │ ├── menu.wxml
│ │ └── menu.wxss
│ ├── order
│ │ ├── order.js
│ │ ├── order.wxml
│ │ └── order.wxss
│ └── takeout
│ ├── message
│ │ ├── message.js
│ │ ├── message.wxml
│ │ └── message.wxss
│ ├── qqmap-wx-jssdk.min.js
│ ├── takeout.js
│ ├── takeout.wxml
│ └── takeout.wxss
├── style
│ ├── .DS_Store
│ └── weui.wxss
└── utils
└── util.jsページ登録
app.json
"pages": [
"pages/index/index", //
"pages/KFC/KFC", // K
"pages/menu/menu", //
"pages/card/card", //
"pages/order/order", //
"pages/takeout/takeout", //
"pages/takeout/message/message", //
"pages/halladdress/halladdress", //
"pages/logs/logs" //
]公式サイトのドキュメントやW 3 Cチュートリアルでウィジェットディレクトリを初期化することができます.ウィジェットの各ページはpagesディレクトリの下に置かれています.新しいページを追加するたびにappが必要です.json.pageの下に登録します.
データシミュレーション
mock.js大紅大紫、フロントエンドをバックエンドから独立させ、KFCデータをシミュレートするのによく分からない学生は参考にすることができます.
1.mockjsフロントエンド開発バックエンドとは独立
2.掘金:easy-mock
3. mock.jsの件
easy-mockデータの作成
メニュー内の各左側の分類はデータのセットに対応するため、右側でもクラス名をレンダリングする必要があるため、単純なシミュレーション構造
[{ "title": " ",
"foodsIndex": [{
"name": " ",
"price": "11.0",
"url": "http://imgm.4008823823.com.cn/kfcmwos/img//S/269_116012.jpg"
},
{},{},{}]自分でケンタッキーをかき集めて注文したり、私がかき混ぜたケンタッキーAPIを使ってみたりすることができます.
地図APIの使用
アプレットマップ初期化
toastによる時間のかかるロードの最適化
wx.showToast({
title: ' ',
icon: 'loading',
duration: 0,
mask: true})
図面が完成したらコールバックでToastを除去
this.mapCtx = wx.createMapContext('myMap', function () { wx.hideToast();
})WXML:
テンセント地図API使用-逆アドレス解析
近くの場所を検索してページリストにレンダリングする例
コアクラステンセント地図ウィジェット版を導入してjsをダウンロードしkey を取得する
let QQMapWX = require('qqmap-wx-jssdk.min.js'); let demo = new QQMapWX({
key: '5Q2BZ-O3W24-V6DUN-DZ4Z7-H427K-WCB7R' //
});APIreverseGeocoder を呼び出す
demo.reverseGeocoder({
location: {
latitude: _latitude,
longitude: _longitude
},
get_poi: 1, success: function (res) { // console.log(res);
}, fail: function (res) { console.log(res);
}, complete: function (res) { console.log(res); that.setData({
pois: res.result.pois
})
}
});setData()を介して私たちのデータがdataに転送されます.このレンダリングページを使用して、thatは元のpageオブジェクトへの参照を維持します.
![]()
{{poi.address}}
地名検索
周囲を捜すKFCを例に
demo.search({
keyword: ' ',
location: {
latitude: _latitude,
longitude: _longitude
}, success: function (res) { // console.log(res);
}, fail: function (res) { // console.log(res);
}, complete: function (res) { console.log(res.data[0].location.lat,res.data[0].location.lng) console.log(res.data[0]) // .address._distance
that.setData({
poi: res.data[0].address,
distance: res.data[0]._distance,
latitude: res.data[0].location.lat,
longitude: res.data[0].location.lng,
markers: [{
latitude: res.data[0].location.lat,
longitude: res.data[0].location.lng,
name: 'KFC',
desc: 'KFC '
}]
})
}
});スープを交換して薬を交換しないコアはやはりsetDataを通じてdataを変えてページに現在のkfcを表示させて、入力ボックスで検索していないで、設定の自動で検索します
カート部分実装
必要な機能:
側navとコンテンツ領域との連動商品の増減は総価格を変更し、ショッピングカートと引き出しの詳細パネルをポップアップする.
引き出しのアニメーション引き出しパネルにおいて商品数を変更する、なければ隠しユニット.
具体的な実装プロセス
側navとコンテンツ領域の連動
gifが爆発したら下の部分の図を直接見て、下のショッピングカートを無視しましょう.
左はメニューの異なる種類をクリックし、右は対応するコンテンツに移動します.ここでの実装では、scroll-viewのAPIを使用して右のコンテンツオブジェクトごとにレンダリングするときにidを添付します.
各navのクリックイベントdatasetを解析します
let goPage = e.currentTarget.idthis.setData({
scroll_into_view: "foodtype" + goPage
})引き出し式ショッピングカート
私がここでやっているのは、各商品にdatasetを付与し、異なる商品をクリックして異なるオブジェクトをカートの配列に入れ、e.targetを通過することです.Dataset入手
//
if (this.data.shoppingList.length > 0) { // ，
let isHave = this.data.shoppingList.findIndex(item => item.name == e.target.dataset.name) if (isHave != -1) { that.data.shoppingList[isHave].num++
} else { //
that.data.shoppingList.push({
price: e.target.dataset.price,
name: e.target.dataset.name,
num: itemNum
}) //
move_length++
} //
} else { this.data.shoppingList.push({
price: e.target.dataset.price,
name: e.target.dataset.name,
num: itemNum
})
move_length++
}アニメーションの使用
APIを参照してください私はここで商品を増やした时、引き出しを上にスクロールして、削除して空の时引き出しを下にスクロールします
data: {
totalCount: 0, //
movelength: 0, //
cartIsHidden: true, //
cartIndexIsHidden: true, //
animationData: {} //
}アニメーションの初期設定をスクロール
let animation = wx.createAnimation({
duration: 400,
timingFunction: "linear",
delay: 0});アニメーションの効果はbottomの変化によって発生します
let mlength = move_length * 55; if (move_length > 1) {
mlength = 55 + (move_length - 1) * 65;
} this.animation = animation animation.bottom(mlength).step()アニメーションシーケンスを追加し、movelengthを設定します.
this.setData({
animationData: animation.export()
}) this.setData({
shoppingList: shopping_list,
totalPrice: total_price,
totalCount: total_count, //
cartIsHidden: false,
movelength: move_length
})
}ページ値
現在、本白が知っている伝値は3種類あります.
1. グローバルなデータキャッシュを設定してこのAPIを見てください
2. url付帯文字列伝値
参考大物掘金微信小プログラム多ページ伝参通信の探索と実践
3. イベントの購読と配布を導入するonfire.js(最近は
例えばこのページでは、そのすべてのデータが以前の選択に来ています.私は自分のプロジェクトで現在ローカルに保存されている方法を使っています.例えば、アドレスの設定取得などです.
選択ページでのローカルストレージの設定
let OrderAddress = {
address: [],
isHall: false
} //
let item = OrderAddress.address.find(item=>item==event.target.dataset.name) if(!item){ OrderAddress.address.push(event.target.dataset.name)
} wx.setStorage({
key: "OrderAddress",
data: OrderAddress,
}); wx.navigateTo({
url:'/pages/takeout/message/message'
})注文ページで住所をもらって、apiに対して多consoleに詳しくありません.log数回、何も解决できないことはありません～
wx.getStorage({
key: 'OrderAddress', success: function (res) { console.log(res.data); that.setData({
address: res.data.address[0],
elementToggle: res.data.isHall
})
}
})最後に踏んだ穴をまとめます
1. まだrpxに行っていないので:本物のスタイルに差があります;同じ数行のテキストを設定しても、高さは一致しません.
2. テンセントの地図の大きい穴z-index、もともと地図のapiで1つの検索の自動のヒントをしたいと思って、しかし描いた地図は微信の内蔵で、z-indexはどんなに高くても地図の上で覆うことができなくて、解決方法は別のページに飛び込んで処理します
3. 合法的なドメイン名を申請する必要があります.要求には合法的なドメイン名に数の制限があります.
4. ページ内ジャンプは5級を超えてはいけません.