目次
4. WeChat 開発者ツールでプロジェクトを実行します。
1.ユニアプリ
公式サイト：uni-app公式サイト
1 はじめに
uni-app は、Vue.js を使用してすべてのフロントエンド アプリケーションを開発するためのフレームワークです (新しいウィンドウが開きます)。開発者は、iOS、Android、Web (レスポンシブ)、およびさまざまな小さなプログラム (WeChat/ Alipay /Baidu/Toutiao/Feishu/QQ/Kuaishou/DingTalk/淘宝網）、クイックアプリおよびその他のプラットフォーム;
2. 開発ツール
uni-app では、Hbuilderx 開発ツールを使用してプロジェクトを開発することをお勧めします。ダウンロード アドレス: HBuilderX-Efficient Geek Skillsまたはここをクリックしてダウンロードし、アプリ開発バージョンをダウンロードします。
1. Sassプラグインをインストールする
[ ツール] => プラグインのインストール => 新しいプラグインのインストール => プラグイン マーケットに移動してインストールします。 ここで必要なプラグインを検索できます。例として sass を取り上げます。プラグインを見つけた後、必要な -ins をクリックして、[ダウンロード] => [Hbuilderx を使用してプラグインをインポート] をクリックします。ここで必要になります。 Sass Web サイトにログインします。ログインに成功すると、Hbuilderx コンパイラが開き、[OK] をクリックしてインストールします。
3. 新しいユニアプリプロジェクトを作成する
Hbuilderx [ ファイル] => [追加] => [プロジェクト] を クリックすると、この記事では新しい小さなプログラム プロジェクトを作成します。 uni-app => プロジェクト名を入力し、プロジェクト ストレージ パスを選択 => テンプレート uni-ui プロジェクト => 作成すると、次のことができます。小さなプログラムプロジェクトを生成します。
コンポーネント: コンポーネント ファイル
Pages: ページ ファイル
static: 静的ファイル
uni_modules: 依存パッケージ
App.vue: アプリケーション構成、アプレット グローバル スタイルの構成、ライフサイクル
main.js: Vue 初期化エントリ ファイル
manifest.json: 構成アプリケーション名 appid、ロゴ、バージョンおよびその他のパッケージ情報
photos.json: ページ パス、ページ スタイル、tabBar およびその他の情報を構成します。
uni、scss: グローバル スタイル
4. WeChat 開発者ツールでプロジェクトを実行します。
1.アプリを設定する
Manifest.json ファイルに WeChat アプレットの appID を入力します=> WeChat アプレットの設定 ;
2. Hbuilderx で WeChat 開発者ツールのインストール パスを構成します。これにより、Hbuilderx での実行時に自動的に WeChat 開発者ツールを開いてプロジェクトを表示できるようになります。
ツール => 設定 => 実行構成 => ミニプログラム実行構成 WeChat 開発者ツールのインストール パスを構成します (例: C:\Program Files (x86)\Tencent\WeChat Web 開発者ツール)
3. WeChat開発者ツールでサービスポートを開きます
設定 => セキュリティ設定 => サービス ポートを安全に開く
4. 走る
Hbuilderx [ 実行] => [ミニ プログラム シミュレーターを実行] をクリックします。 最初のボタンをクリックすると、Hbuilderx で自動的にコンパイルされ、成功すると WeChat 開発者ツールが自動的に開きます。
注: 現時点では、プロジェクトのコンテンツを変更したいので、構成を変更するなど、Hbuilderx でプロジェクトを変更する必要があります。manifest.jsonファイル => ソース ビュー
2. tabBar効果を実現する
1. tabBar ページを作成する
ページの下に作成し、右クリックして新しいページを作成します。ここには、tanBar に対応するいくつかのページがあります。デフォルトで選択されている「同じ名前でディレクトリを作成し、pages.json に登録する」という 2 つのオプションを忘れずにチェックしてください。ホーム、ケイト、カート、私）
2.タブバーを構成する
tabBar 設定をpages.json ファイルのページ レベルに追加します。
"tabBar":{
"selectedColor":"#C00000",
"list":[
{
"pagePath":"pages/home/home",
"text":"首页",
"iconPath":"static/c1.png ",
"selectedIconPath":"static/c2.png"
},
{
"pagePath":"pages/cate/cate",
"text":"分类",
"iconPath":"static/c3.png",
"selectedIconPath ":"static/c4.png"
},
{
"pagePath":"pages/cart/cart",
"text":"购物车",
"iconPath":"static/c5.png",
"selectedIconPath":"static/c6.png"
},
{
"pagePath":"pages/my/my",
"text":"我的",
"iconPath":"static/c7.png",
"selectedIconPath":"static/c8.png"
}
]
}
注: home は、pages 配列の先頭にもなければなりません。pages.json ファイル内の globalStyle 構成項目を変更して、独自のナビゲーション バー スタイルをカスタマイズすることもできます。
3. ユニアプリでの小規模プログラムの請負
1. サブパッケージディレクトリを作成します。
ルート ディレクトリの下にサブパッケージ ディレクトリ subpackage を作成します。
2.pages.json ファイルで設定する
ページ ノードと同じレベルで、サブパッケージ ノードを宣言して、サブパッケージ構造を構成します。
"サブパッケージ":[
{
"ルート":"サブパッケージ",
"ページ":[]
}
]
3. サブパッケージページの作成
sunpackage ディレクトリ内の新しいファイルを右クリックし、ページ名を入力し、サブパッケージ sunpackage を選択して作成します。コンパイラは、コード内の sunpackage サブパッケージの下に構成情報を自動的に入力します。
"subPackages":[
{
"root":"subpackage",
"pages":[{
"path" : "goods_detail/goods_detail",
"style" :{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
}
]
注: ここでは、ページ リダイレクトとパラメータの受け渡しがアプレットのネイティブ リダイレクトと同じであると述べています: 1. ナビゲータは URL ジャンプとパス スプライシングと連携してパラメータを渡します; 2. クリック イベントは uni.redirectTo を通過します。
4. パブリックメソッドのカプセル化
ここでは、main.js のエラー メッセージを例に挙げます。
uni.$showMsg = function(titie="リクエストが失敗しました",duration=1000){
uni.showToast({
title,
period,
icon:"none"
})
}
5. 検索機能
1. 検索コンポーネント
1. 検索コンポーネントをカスタマイズします。コンポーネント フォルダーを右クリックし、 [ 新しいコンポーネント]を選択します 。ここにコンポーネントのコンテンツを書き込むことができます。
2. ミニ プログラムのカスタム コンポーネント カスタム イベント: ミニ プログラムによって提供されるコンポーネントはクリック イベントのカプセル化に役立つため、直接使用できますが、カスタム コンポーネントはカプセル化されていないため、カスタム コンポーネント イベントのクリックを直接使用することはできません。 ;
カスタム イベントを親コンポーネントにバインドし、クリック イベントを子コンポーネントにバインドし、クリックがトリガーされたときに $emit を使用して親コンポーネントにバインドされたカスタム イベントをトリガーすることができます。これにより、カスタム コンポーネントのイベント配信が行われます。完了することができます。
3. 天井: 主にposition:stickyを使用して、コンポーネントをページの上部に配置します。
最後に、コンポーネントを使用します。これはページ上で直接使用でき、コンポーネント名はカスタム コンポーネントのファイル名です。
//自定义構成要素
<template>
<view class="my-search-container" :style="{'background-color':bgColor}"> <view class="
my-search-box" :style="{ 'border-radius':radius}">
<uni-icons type="search" size="18"></uni-icons>
<text class="placeholder">搜索</text>
</view>
</ view>
</template>
<script>
デフォルトのエクスポート {
name:"my-search"、
props:{
bgColor:{
type:String、
default:"#c00000"
}、
radius:{
type:String、
default:"18px"
}
},
methods:{
// $emit を介して、親コンポーネントにバインドされたカスタム イベントをトリガーします
searchEvent(){
。 this.$emit('myclick')
}
}
}
</script>
<style lang="scss">
.my-search-container{
height: 50px;
// 背景色: #c00000;
ディスプレイ:フレックス;
整列項目: 中央;
パディング: 0 10px;
.my-search-box{
高さ: 36px;
背景色: #FFF;
// 境界線の半径: 18px;
幅: 100%;
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
整列項目: 中央;
.placeholder{
フォントサイズ: 15px;
左マージン: 5px;
}
}
}
</スタイル>
//父组件
<template>
<view>
<view class="suckTop">
<my-search @myclick="goSearch" :radius="'0px'" :bgColor="'pink'"></my-search >
</view>
</view>
</template>
<script>
デフォルトのエクスポート {
methods:{ goSearch
(
){
uni.navigateTo({
url:"/subpackage/search/search"
})
}
}
</script>
<style lang="scss">
.suckTop{
位置: スティッキー;
トップ: 0;
z インデックス: 999;
}
</スタイル>
2. 検索候補の実装
<template>
<view>
<view class="suckTop">
<uni-search-bar @input="input" :radius="18" :focus="true" cancelButton="none"></uni-search- bar>
</view>
</view>
</template>
<script>
export default {
data() {
return {
timer:null,
kw:''
}
}、
methods: {
//输入框イベント
input(e){
clearTimeout(this.timer)
this.timer = setTimeout(_=>{
this.kw = e.value;
},500)
}，
}
}
</script>
<style lang="scss">
.suckTop{
位置: スティッキー;
トップ: 0;
z インデックス: 999;
.uni-searchbar {
背景色: #c00000
}
}
</style>
uni-app が提供するコンポーネントを使用し、インターフェイスが入力ボックスを自動的にロックできるようにフォーカスを追加し、入力イベントにスロットリングを追加して、スロットリング メソッドでインターフェイスを呼び出して検索結果を取得してレンダリングします。
3. ローカルストレージ
//保存
uni.setStorageSync('kw',JSON.stringify(this.kw));
//onLoad ステートメントで let リストを取得します。cycle
= JSON.parse(uni.getStorageSync('kw') || '');
/ /delete
uni.setStorageSync('kw',[]);
4. フィルター
データと同じレベルでフィルターを宣言する
フィルター:{
toFixed(num){
return Number(num).toFixed(2);
}
}
使用時にインターフェイス上で直接
<ビュー>{
{番号 | toFixed}}</view>
6. プルアップロード、プルダウンリフレッシュ
1. プルアップロード
Pages.json のページ配列で現在のページのパスを見つけ、スタイルの 150 に onReachBottomDistance を追加します。
ページのプルアップ イベントをリッスンするために、ページ内のメソッドのレベルで onReachBottom メソッドを宣言します。
data() {
return {
isLoading:false
};
},
methods:{
getList(){
//スロットルを開く
this.isLoading = true;
//データを取得
let res = .....
//スロットルを閉じる
this.isLoading = false;
}
},
//プルアップ イベントをリッスン
onReachBottom() {
//これ以上データはありません
if(this.pagenum*this.pagesize >= this.total) return uni.$showMsg('これ以上データはありません')
//頻繁なリクエストを防ぐために電流を制限する
if(this.isLoading) return;
//this.pagenum++
によりページが自己増加する;
//リストデータの取得メソッド
this.getList();
}
2. プルダウンして更新します
Pages.json のページ配列で現在のページのパスを見つけ、スタイルにenablePullDownRefresh を追加して true に設定します。
ページのメソッド レベルで onPullDownRefresh メソッドを宣言して、ページ プル イベントをリッスンします。
Methods:{
getList(cb){
//スロットルを開く
this.isLoading = true;
//コールバック関数
cb && cb()を呼び出す;
//データを取得
let res = .....
//スロットルを閉じる
this .isLoading = false ;
}
},
onPullDownRefresh() {
this.total = 0;
this.pagenum = 1;
this.list = [];
this.isLoading = false;
// プルダウン更新効果を停止するコールバック関数を渡します
。 getList(()=> uni.stopPullDownRefresh());
}
7. ログイン
ログイン インターフェイスを呼び出す前に、ユーザーの基本情報とコードをパラメーターとして取得する必要があります。
1. 基本的なユーザー情報の取得
<button open-type="getUserInfo" @getuserinfo="getInfo">ワンクリック ログイン</button>
メソッド:{
//カスタム メソッド
getInfo(e){
console.log(e)
}
}
ここではbuttonコンポーネントが提供するopen-typeを直接使用しており、これはgetUserInfoと同等であり、ユーザー情報は@getuserinfoイベントバインディングメソッドから取得されます。固定の記述方法は次のとおりです。公式Webサイトを参照してください: button | uni・アプリ公式サイト
2. ユーザーのログイン認証コードを取得します。
これにより、uni.login() API を直接呼び出すことができます。
async getCode(){
let [err,res] = await uni.login().catch(err=>err)
console.log(res)
}
8. お支払い
1. リクエストヘッダーにトークンを追加する
ログインが成功した後にのみ、支払い関連のインターフェイスを呼び出すことができます。ログイン後に取得したトークンを、許可を得てインターフェイスのリクエスト フィールドに設定する必要があります。一般に、ヘッダーはリクエスト インターセプトのインターフェイスに対して均一に設定されます。
$http.beforeRequest = function (オプション) {
uni.showLoading({
title: "データの読み込み中..."
})
options.header = {
Authorization: token
}
}
2.WeChat支払いプロセス
1.注文を作成する
注文情報をバックグラウンド サーバーに送信し、注文を作成し、注文番号を取得します。
2.注文前払い
注文番号をバックグラウンド サーバーに送信して、支払い関連のパラメーターを取得します。
3.WeChat支払いに電話をかける
uni.requestPayment(OBJECT) API を呼び出して支払いリクエストを開始し、fail および success コールバック関数を通じて支払いが成功したかどうかを監視し、バックグラウンド インターフェイスを呼び出して支払いステータスをデータベースに同期します。
他の
より一般的なコンポーネント、API、および問題のいくつかを次に示します。
1、API：uni.previewImage(OBJECT)
画像をプレビューするには、カルーセル メソッドを使用して表示できます。
2、API：uni.chooseAddress(OBJECT)
ユーザーの配送先住所を取得します。配送先アドレスを編集するためにユーザーのネイティブ インターフェイスを呼び出し、編集後にユーザーが選択したアドレスを返します。ユーザーはscope.address を承認する必要があります。
3. コンポーネント: リッチテキスト
リッチテキストをレンダリングします。
4. コンポーネント: uni-goods-nav
製品をショッピング カートに追加し、コンポーネントをすぐに購入します。
5. 問題: .webp サフィックス画像が iOS 上で問題を表示しない
iOS での画像の .webp 形式サポートはあまりフレンドリーではありません。正規表現が必要な限り、画像のサフィックスを .jpg に置き換えることができます。
6. 問題点：商品価格ちらつき問題
データがページにリクエストされる前に、データ内のデータは最初は {} であるため、最初のレンダリングで一部のデータがちらつきます。最初に v-if を使用してデータが存在するかどうかを判断し、データの表示と非表示を制御できます。全体的なインターフェース。
7. 問題: ハーベストアドレス認証失敗問題
認証失敗の問題であるかどうかを判断し、そうである場合は、uni.openSetting(OBJECT) API を直接呼び出してアドレス権限を開きます。これは iOS および Android と互換性があることに注意してください。
要約する
uni-app を使用した WeChat アプレット用のアプレットの開発といくつかの機能の実現に関するこの記事はこれで終わりです。Uni-app を使用した WeChat アプレット用のアプレットの開発について詳しくは、以前の記事を検索するか、関連する記事を引き続き参照してください。以下の記事を参照して、今後もDeveloppaerを大いにサポートしていただければ幸いです。