uniapp は、vant/uview を含む WeChat アプレット/h5 の完全なプロセスを開発します (h5 は vw に適応します)。

---

テーマ: スマートブルー
ハイライト: ダーク

---

プロジェクトを作成

作成したプロジェクト

ここに穴をあけます

uniapp vue-cli を使用してプロジェクトを作成することもできます

vue create -p dcloudio/uni-preset-vue my-project

vue3/vite を使用してプロジェクトを作成します (コマンド ラインの作成に失敗した場合は、giteeに直接アクセスしてテンプレートをダウンロードしてください)

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

作成したディレクトリは以下のとおりです ( uview フレームワークは vue3 をサポートしていません)。

To run the project, use yarn dev:mp-weixin
to open the applet development tool and import the packaged dist package. weixin パッケージは開発ツールで使用でき、パッケージのリリースは同じです

HubilderX はすでにテンプレートを作成するために vue3 をサポートしています

• 上の図に示すように、左上隅の新しいプロジェクトをクリックすると、右下隅に Vue バージョン オプションが表示されます。デフォルトは 2 で、3 を選択できます。
• バージョン 3 を選択した後に作成されるプロジェクトは vue2 と同じですが、setup構文を使用できます
• vue3 にはこの点がないので、次のような構文を導入する必要がありますimport {onShow} from '@dcloudio/uni-app'
  **以下はデモの例です**

** コンソール情報は次のとおりです. vite を使用してコンパイルすると、コンパイルとパッケージ化をより迅速に開始できることがわかっています. webpackと vite の具体的な比較については、公式 Web サイトを参照してください.

u-view フレームワークを使用します ( uview フレームワークは vue3 を一時的にサポートしていません)。

1. 端末を開いてコードを入力npm install uview-ui詳細は公式サイトu-viewを参照

2. グローバル uView の導入

import uView from 'uview-ui'
Vue.use(uView)
//使用rpx
uni.$u.config.unit = 'rpx'

3. uni.scss で参照 @import 'uview-ui/theme.scss';

4. pages.json で easycom コンポーネント モードを設定する

"easycom": {
    // npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    // "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},

HBuilderX を再起動した後、UI フレームワークがプロジェクトに導入されました

vex を使用する

uniapp で vuex を使用する

在src目录下新建一个store文件件, 在store文件夹下创建index.js
此处我使用了vuex-persistedstate 保持数据的持久化插件
命令行:   npm install --save vuex-persistedstate
然后跟vue中一样创建store在main.js中挂载
下面上代码

ストア/index.js

main.js

公式開発

構成ページ

新規ページを作成してpage.jsonに登録し、ステータスバーなどを設定する（詳しくはuniapp公式サイトを参照）

	{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "主页",
				"navigationBarBackgroundColor":"#fff",
				"navigationStyle":"default",
				"navigationBarTextStyle":"black",
				"enablePullDownRefresh":false,
			}
		}

tarbar公式ウェブサイトの tarbarを構成する

"tabBar": {
 	"list": [{
 		"pagePath": "pages/index/index",
 		"text": "home"
 	}]
 },

UI フレームワーク uview を使用する

uview には同様の方法で 2 つのインストール方法 (npm 構成、### Hbuilder 構成) があることが知られており、npmp 構成のダウンロード方法の構成は
ここでは示していません。

ヴァントを使う

ダウンロード vant アプレットのソースアドレスvant-weapp: 軽量で信頼性の高いウィジェット UI コンポーネント ライブラリvant-weapp: 軽量で信頼性の高いウィジェット UI コンポーネント ライブラリ

最初に src ディレクトリに wxcomponents/vant ディレクトリを作成します

ダウンロードしたソースdistパッケージの「content」をvantディレクトリに再度入れます（distフォルダではなく、distパッケージ内のコンポーネントフォルダであることに注意してください）

ここでは、uniapp の easycom メカニズムを使用して、コンポーネントを自動的に導入します。

ディレクトリ構造に注意して、usingComponents を使用する必要がないようにします。コンパイル後に自動的に登録されます。

app.vue に追加

<style>
/*每个页面公共css */
@import "/wxcomponents/vant/common/index.wxss";
</style>

page.json に追加

 "easycom": {
        "custom": {
            "^van-(.*)": "@/wxcomponents/vant/$1/index"
        }
    },

最後に、必要なページでコンポーネントを直接使用できます

<van-button type="danger">危险按钮</van-button>

最後に、アプレットがリリースされた場合、未使用のコンポーネントを削除してパッケージのサイズを縮小できます。

カスタム ターバート、ナビゲーション バー

1-1. 元の tarbar は App.vue onShow で非表示にする必要があります

uni.hideTabBar()

1-2. 共通コンポーネントを作成するには、u-view で tarbar コンポーネントを使用するか、コンポーネントのスタイルをカスタマイズして、ページ上で直接使用できます

easycom自動的にオンになり、手動でオンにする必要はありません。
コンポーネントディレクトリに同じ名前を作成するだけでよく、components/组件名称/组件名称.vueディレクトリ構造になっているため、ページ上の登録ポイントを参照する必要はありません. I see the official website address

u-view tarbar コンポーネント

ここでは、特定のビジネス ロジックとページ UI は示しません。

2-1. page.json にページ スタイルを設定して"navigationStyle": "custom"元のスタイルを削除する

2-2. 上の図に示すように、カスタム ナビゲーション バー コンポーネントをページに導入して使用します (
u-view navbar コンポーネント)

カスタムコンポーネントを使用する場合、iphonex以上のモデルの底の高さに注意する必要があります

.box { padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); }

u-view コンポーネントのスタイルを変更する場合、2 つの点に注意する必要があります
。

3-1. app と h5 での一般的な passv-deepまたは/deep/order の変更

3-2. WeChat アプレットでは、親コンポーネントのクラス名の下に変更する必要があります

コンポーネント クラス名は .navbar Wechat アプレットは /deep/ を使用する必要があります

ログインプロセス

上の図は、WeChat ミニ プログラムの公式ログイン図です。

uni.login を使用

上の図から、uni.login() によって返されるコードでログイン ステータスを取得する必要があることがわかります。

manifest.json を開く WeChat アプレットを開いて appid を設定します。appid はバックエンドの appid と一致する必要があります。

バックエンドと WeChat サーバーは openid と session_key を要求し、バックエンドはこの時点でログイン ステータスをカスタマイズできます

ログインページの処理についてですが、
ホームページでは、ログイン後のユーザー情報やトークンなどのローカル情報があるかどうかを判断し、ユーザーの携帯電話を使ってローカルに保存しています。

ローカル情報がない場合は、ログイン ページにジャンプし、ユーザーはボタンをクリックしてログインし、ユーザー情報を更新してから、ホームページに戻って他の情報を読み込みます。

既存の情報はローカルにあり、uni.login() を実行してトークンを更新し、ユーザー トークンの有効期限が切れないようにします。onload() に書き込むのが最善です。毎回ログインする必要はありません。

ユーザー情報を取得する

uni.getUserProfile() の使用は、getUserInfo を取得するためのクリック イベントで取得する必要があります。これは使用できず、
ユーザーのニックネームとアバター情報のみを取得でき、その他の情報は取得できません。

クリックごとにユーザー認証が必要

携帯番号を取得する

私は両方の方法を使用しました. 現在、私は最初の方法を使用しています. 2番目の方法は、uni.loginのコードを個別に取得してバックエンドに渡す必要があります.

1. getPhoneNumber インターフェイスを使用します.このメソッドは、アプレットによって認証されたアドレスでなければなりません.

getphonenumber メソッドによって返される値を次の図に示します。

バックエンドは、ログインするためのコード (動的トークン) を取得し、バックエンドで携帯電話番号を復号化できます. 具体的な方法は次のとおりです。

2. 携帯電話番号の解読方法

ボタン コンポーネント open-type="getPhoneNumber" @getPhoneNumber = getPhoneNumber のクリック イベントを使用して、暗号化された携帯電話番号を取得します。バックエンドの復号化を使用して、uni.login によって返されるコードを取得し、それを渡すことをお勧めします。ログインを完了し、携帯電話の登録およびその他の情報アドレス

パッケージリクエスト

uview パッケージ化された方法を使用することも、自分でパッケージ化することもできます

複数データリクエスト読み込み処理

複数のデータ リクエストを同時に開始して、最後のリクエストが終了したかどうかを判断します. 最後のリクエストが終了した場合 && このリクエストが終了した場合, ロードを閉じます. 他のロード カプセル化のアイデアを参照してください
.

`// const baseUrl = xxxx;
var num = 0;
export default function requset(url, data = {}, method = "GET", getToken = true,isShowLoading = true, ) {
if (isShowLoading) {
	num++;
	uni.showLoading({
		title: '加载中...',
		mask: true
	})
}
let token = uni.getStorageSync('token')
const header = {
	'content-type': 'application/json',
}
if (getToken) {
	header.Authorization = token
}
return new Promise((resolve, reject) => {
	uni.request({
		url: baseUrl + url,
		data,
		method,
		timeout: 10000,
		header,
		success(res) {
			resolve(res)
		},
		fail(err) {
			if (err.errMsg == 'request:fail timeout') {
				uni.showToast({
					title: '请求超时，请重试!',
					duration: 2000,
					icon: "none"
				});
			} else if (err.errMsg == 'request:fail ') {
				uni.showToast({
					title: '无网络!',
					duration: 2000,
					icon: "none"
				});
			} else {
				uni.showToast({
					title: '服务器错误',
					duration: 2000,
					icon: "none"
				});
			}
			reject(err)
		},
		complete() {
			if (isShowLoading) {
				setTimeout(() => {
					num--;
					console.log('第几次', num)
					if (num === 0) {
						uni.hideLoading()
					}
				}, 200)
			}
		}

	})
})
}

//在api.js中引入次方法 并且暴露出去
import requset from './requset.js'
export function getLoginUserInfo() {
    return requset('/wx/mini/getLoginUserInfo')
}

uview を使用した 2 つ目のカプセル化方法

公式uniにはルートインターセプトがなく、ここではuviewのルートインターセプトが使われています

const request = (Vue) => {
	Vue.prototype.$u.http.setConfig((config) => {
		config = configs
		return config
	});
	// 请求拦截
	Vue.prototype.$u.http.interceptors.request.use((config) => { 
		uni.showLoading({
			title: '加载中',
			mask: true,
		});
                //设置token
		config.header.Authorization = uni.getStorageSync('Authorization') || '';
		return config
	})

	// 响应拦截
	Vue.prototype.$u.http.interceptors.response.use((response) => {
		if (response.data.status != 200) {
			uni.hideLoading();
			uni.showToast({
				title: response.data.msg,
				icon: 'none',
				duration: 2000
			})

		}
		return response;
	}, (err) => {
		uni.hideLoading();
		// 对响应错误做点什么 
		if (err.errMsg == 'request:fail timeout') {
			uni.showToast({
				title: '请求超时，请重试!',
				duration: 2000,
				icon: "none"
			});
		} else if (err.errMsg == 'request:fail ') {
			uni.showToast({
				title: '无网络!',
				duration: 2000,
				icon: "none"
			});
		} else {
			uni.showToast({
				title: '服务器错误',
				duration: 2000,
				icon: "none"
			});
		}
		return err
	})
}
export default request;

インターフェイス リクエスト (ここで使用される uview パッケージ API が直接使用されます)

const http = uni.$u.http;
const api = '/api';
//get请求
export const getUserInfo = (params) => http.get(api + '/xxx', {params})
//post 请求
export const login = (data) => http.post('/xxx', data)

アドレスを取得

uni.getLocation() を使用して緯度と経度を取得します. その前に, ユーザーが承認されているかどうかを判断する必要があります. 承認されていない場合は uni.openSeting() と協力してユーザーを承認するように誘導します. uni.authorize() を使用してください.ユーザーが承認されているかどうかを判断します。承認されていない場合は uni.openSeting を呼び出し、承認さ
れている場合は uni.openSetting uni.getLocation を呼び出します。

    	uni.authorize({
		scope: 'scope.userLocation',
		success(res) {
		uni.getLocation({
                       type: 'gcj02 ',
                       success(res) {
                       const latitude = res.latitude;
                       const longitude = res.longitude;
			}
		)},
		fail(err) {
                    uni.showModal({
                    title: '是否开启',
                    content: '当前需要获取您的地理位置',
                    showCancel:false,
                    success: function(res) {
                    if (res.confirm) {
			uni.openSetting({
			success(res) {											if (res.authSetting['scope.userLocation']) {
                                //执行你需要的请求操作
				} else {
					uni.showToast({
						title: '无法获取最近电站信息',
                                                duration: 2000,
						icon: "none"
					})}}
									})
								}
							}
						});
					}
				})
    

お支払い手続き

WeChat アプレットを使用して uni.requestPayment()公式ウェブサイト アドレスを支払う

通常、WeChat の支払いに必要なデータはバックエンドから返されます。この API を呼び出すだけで済みます。

// 仅作为示例，非真实参数信息。 uni.requestPayment({
    provider: 'wxpay',//微信付款
    appid:'',
    timeStamp: String(Date.now()), //时间戳
    nonceStr: 'A1B2C3D4E5', //随机字符串
    package: 'prepay_id=wx20180101abcdefg',//统一下单接口返回的 prepay_id 参数值
    signType: 'MD5',//加密方式
    paySign: '',//寄吗数据
    success: function (res) { console.log('success:' + JSON.stringify(res)); },
    fail: function (err) { console.log('fail:' + JSON.stringify(err)); } });

リリース

Hubilder クリックして WeChat アプレットに公開

梱包後にプロンプ​​トが表示された場合

mainfest.json でソース コード ビューを開き、次のように構成します。

下請

• 1 つのサブパッケージのサイズは 2m で、WeChat アプレットでは 20m を超えることはできないと規定されています

• uniapp で WeChat アプレットのサブコントラクトを使用するには、manifest.json でサブコントラクトを有効にする必要があります.公式サイトのアドレスは下図のとおりです.

• 必要なサブパッケージを構成します。サブパッケージの公式 Web サイトの例のアドレスをpages.json で構成します。構成を次の図に示します。

この時点で、構成が完了し、WeChat 開発者ツールを実行し、詳細をクリックすると、下請けを追加したことが表示されました。

ニュース購読

現在、ニュース定期購読は一括購読と長期購読が一般的です。長期購読は主にパブリックユニット向けに開発されているため、今回は一時購読を使用します

WeChat公式リンク

ユニアプリ公式リンク

[外部リンクの画像の転送に失敗しました。ソース サイトにはリーチング防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-nG6DbAab-1660528771037)(https://p6-juejin.byteimg.com/tos -cn-i-k3u1fbpfcp /d3da72aeb52e4edfb979841d6e3c413e~tplv-k3u1fbpfcp-watermark.image?)]

ニュースを購読する前に、アプレットのバックグラウンドでメッセージ テンプレートを設定する必要があります.クリックして WeChat パブリック プラットフォームにジャンプし、ログインして購読メッセージ列にメッセージ テンプレートを設定します.

公式のメッセージテンプレートは種類が豊富で、自分でマッチングできます メッセージテンプレートの申請も可能です

プロジェクトでサブスクリプション メッセージを使用する方法は次のとおりです。

   		uni.requestSubscribeMessage({
			tmplIds: ['HAAIddwfUie7huMk2D3QZ-xxxxxxxxxxxxx',
				'2zDrf9SNpGq6hU1vSbfLQganFnQE_xxxxxxxxxxxxx'
			],
			success(res) {
				console.log(res);
				// 值包括'accept'、'reject'、'ban'。
				// 'accept'表示用户同意订阅该条id对应的模板消息，
				// 'reject'表示用户拒绝订阅该条id对应的模板消息，
				// 'ban'表示已被后台封禁
				// if (res.errMsg == 'requestSubscribeMessage:ok') {
				// 	console.log('订阅成功');
				// 	uni.showToast({
				// 		title: '订阅成功'
				// 	})
				// }
			},
		})

イベント写真を印刷する

1. イベントをクリックした後、API を呼び出すだけ. tmplIds はメッセージ サブスクリプション テンプレート ID で、複数指定できますが、1 回の呼び出しで最大 3 つのメッセージをサブスクライブできます。

2. TEMPLATE_ID は動的なテンプレート ID です。各メッセージは独立して存在し、必要に応じて単一の判断が必要です。

3. [上記のオプションを常に保持する] をオンにすると、ポップアップ プロンプトは表示されなくなります。

4. キャンセル ボタンが選択された場合、デフォルトでは常に拒否状態になり、プロンプトは表示されません. このとき、uni.getSetting でメッセージ プロンプトを開くようにユーザーを誘導する必要があります; withSubscriptions: かどうかデフォルトでは取得されない、ユーザーのサブスクリプション メッセージのサブスクリプション ステータスを同時に取得する

(ヒント: 実デバイス テストでメッセージ通知を開いた後、サブスクライブ メッセージをもう一度クリックすると、ポップアップ ウィンドウは表示されません。正しい方法: 開発者ツールでキャッシュをクリアし、実デバイスに再コンパイルしてから、サブスクライブ メッセージをもう一度呼び出して、ポップアップ ウィンドウ通常イベントを呼び出します)

この時点で、作業の半分はすでに完了しており、後でメッセージ

メッセージのプッシュは、サーバー側のプッシュまたはクラウド機能のプッシュにすることができます

メッセージのプッシュは一般にバックエンドによって行われます. フロントエンドのパラメータをインターフェイスを介してサーバーに渡すことができます. サーバーは適切な機会にそれをユーザーにプッシュします. データ値はのキー値に対応する必要があることに注意してください
.メッセージ テンプレート。

h5適応問題

h5 適応問題に関しては、多くの人が解決策を持っていると思います.解決策を私と共有してください.より良い方法があれば、それを提案してください.

レム

レムは使っていません

vw

• vw : ビューポートの幅に対して、1vw はビューポートの幅の 1% に等しい (合計のビューポートの幅は 100vw)
• vh : ビューポートの高さに対して、1vh はビューポートの高さの 1% に等しい (ビューポートの高さの合計は 100vh)
• vmin : vw と vh の最小のものを選択します
• vmax : vw と vh の最大のものを選択します

h5適応ソリューション

uniapp 公式サイトで提供されている解決策は、rpx を px に変換することです
.rpx は px に変換できるため、px を vw に使用することもできます

vw

• サードパーティのプラグイン postcss-px-to-viewport をインストール 通常の uniapp で作成したプロジェクトをインストール済み

• プロジェクトに postcss.config.js ファイルを作成する

• ファイルに何かを書き込む

  viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，iPhone 6s 一般是37
  viewportHeight: 667, // 视窗的高度，iPhone 6s 一般是667
  unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
  viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw
  selectorBlackList: [".ignore", ".hairlines"], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
  minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
  mediaQuery: false, // 允许在媒体查询中转换`px`
  fontViewportUnit: "vw", //字体使用的视口单位
  exclude: [/node_modules/], 
  

それ以来、一般的に使用される機能は基本的に完成しており、その他はビジネス ロジックです.プロジェクトで遭遇した問題については、後で引き続き共有します.