ユニアプリが急速に開発されており、開発ツールが非常に便利であることは誰もが知っています。
公式サイトの手順に従って、新しいユニアプリプロジェクトを作成しましょう
環境はvueです（自分でインストールしてください）
以下の手順は公式ウェブサイトから取られています
公式バージョンを使用する（HBuilderXの最新の公式バージョンに対応）
vue create -p dcloudio/uni-preset-vue my-project
アルファ版を使用する（HBuilderXの最新のアルファ版に対応）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
公式ウェブサイトは次のように促します：
新しいコマンドを実行すると、ネットワークからモジュールがダウンロードされます。これにはしばらく時間がかかります。
以前にtsのデフォルトのテンプレートをカスタマイズしたことがあるので、次の図に示すように、公式Webサイトよりも1つ多くのオプションが提供されます。
初めてHellouni-appを選択するだけです
次に、ダウンロードが成功するのを待ちます。
プロジェクトに入り、npm runserveを実行します
初めて開いたときはジャンプボタンがありません。これは後で追加したものなので、気にしないでください。
最初に、単純な要求インターセプトのための比較的単純なプラグインであるuni-requestを紹介します。
cnpm install uni-request --save
次に、jsファイルを追加し、リクエスト情報をカスタマイズします
import uniRequest from 'uni-request'
uniRequest.defaults.baseURL = '*******';
uniRequest.defaults.headers.common['Authorization'] = '****';
uniRequest.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 其余自定义信息可参考axios封装自定义
export default uniRequest
次に、main.jsでマウントをグローバルに導入します
import uniRequest from '@/utils/request.js'
Vue.prototype.uniRequest = uniRequest
コードにテストを導入しましょう
index.vueファイル内
まず、uni.requestネイティブAPIの使用法をテストします。これは無料のAPIです。公式ウェブサイトにアクセスして、申請してください。
// 获取天气
getWeatherInfo(cityId) {
const that = this
// 测试发送请求
uni.request({
url: 'https://www.tianqiapi.com/api?version=v1&appid=****&appsecret=****&cityid=' + cityId,
method: 'GET',
success: function (res) {
console.log(res)
},
fail: function (err) {
}
})
},
リクエストは成功しました
次に、パッケージ化されたuniRequestを使用してテストし、非同期リクエスト同期を使用します
async getHomeData() {
// 测试发送请求
const res = await this.uniRequest.get('/template/getTemplateList?type=applet')
console.log(res)
},
リクエストは成功しました
それから、一番面倒なユニシンプルルータープラグインを紹介しました。公式サイトではvue-routerと同じと書いてありますが、pだけが早く開発されて、開発ツールがとても便利だとよく思います。 。公式サイトの
手順に従って、新しいユニアプリプロジェクトを作成しましょう。公式ウェブサイトのドア環境はすべてvueです（自分でインストールします）。次の手順は、公式ウェブサイトから取得し、公式バージョンを使用します（ HBuilderXの最新の公式バージョン）
vue create -p dcloudio/uni-preset-vue my-project
アルファ版を使用する（HBuilderXの最新のアルファ版に対応）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
公式ウェブサイトのプロンプトは次のとおりです。新しいコマンドを実行すると、ネットワークからモジュールがダウンロードされます。しばらく時間がかかります。以前にtsのデフォルトテンプレートをカスタマイズしたため、公式ウェブサイトよりも1つ多くのオプションがあります。下の図で初めて、Hello uni -App OKを選択し、ダウンロードが成功するのを待ちます。プロジェクトに入り、npm runserveを実行します最初に開いたときはジャンプボタンがありません。これは後で追加したものです。心配しないでください。簡単なリクエスト用に、比較的シンプルなプラグインであるuni-requestを紹介しましょう。傍受。
cnpm install uni-request --save
次に、jsファイルを追加し、リクエスト情報をカスタマイズします
timport uniRequest from 'uni-request'uniRequest.defaults.baseURL = '*******';
uniRequest.defaults.headers.common['Authorization'] = '****';
uniRequest.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 其余自定义信息可参考axios封装自定义export default uniRequest
次に、main.jsでマウントをグローバルに導入します
import uniRequest from '@/utils/request.js'
Vue.prototype.uniRequest = uniRequest
コードでテストを紹介しましょう。まず、index.vueファイルでuni.requestネイティブAPIの使用法をテストします。これは無料のAPIです。アドレスの公式ウェブサイトにアクセスして適用してください。
// 获取天气getWeatherInfo(cityId) {
const that = this // 测试发送请求
uni.request({
url: 'https://www.tianqiapi.com/api?version=v1&appid=****&appsecret=****&cityid=' + cityId,
method: 'GET',
success: function (res) {
console.log(res) },
fail: function (err) {
} }) },
リクエストは成功しました。次に、パッケージ化されたuniRequestを使用してテストし、非同期リクエスト同期を使用します
async getHomeData() {
// 测试发送请求
const res = await this.uniRequest.get('/template/getTemplateList?type=applet') console.log(res) },
リクエストが成功したので、一番面倒なuni-simple-routerプラグインを紹介しました。公式サイトではvue-routerと同じと書いてありますが、ルーティングを自動で構築する方法しか見つけられないことがよくあります。テーブルをうまく導入することができます。その後、まだ一連の質問がありました。
ルーティングテーブルを自分で作成したときに発生した問題について説明します。
紹介方法については詳しく説明しませんが、公式サイトではさまざまな方法で紹介しています。
公式サイトモードによると、npmを使って紹介しました
公式サイトをフォローし、直接以下の方法で紹介する場合
その後、RouterMountはさまざまなエラーを報告するか、容量が不足している可能性があります。ご不明な点がございましたら、直接ご連絡ください。実際、名前とパスが見つからず、未定義であるという別のエラーがありますが、テストが表示されない可能性があるため、これにコメントすることで解決することもできます。
router /index.jsのコードを添付してください
import Vue from 'vue'
import Router,{
RouterMount} from 'uni-simple-router'
Vue.use(Router)
const router = new Router({
debugger: true,
routes: [
{
//注意：path必须跟pages.json中的地址对应，最前面别忘了加'/'哦
path: '/pages/index/index',
name: 'index', //在路由跳转时可直接使用name来跳转，后面会讲到
aliasPath: '/' //对于h5端你必须在首页加上aliasPath并设置为/
//可以自定义路由元信息
},
{
path: '/pages/login/login',
name: 'login'
}
]
})
console.log(router)
router.beforeEach((to, from, next) => {
// ...
console.log(to)
console.log(from)
next()
})
export default router
解決策は置くことです
//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
RouterMount(app, '#app');
// #endif
// #ifndef H5
app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif
このように直接書かれているので、クロスプラットフォームで問題が発生すると推定されますが、少なくともエラーは発生しません（大物にアドバイスを求めてください）
app.$mount();
これは成功後の外観ですが、ページを自動的に切り替えることはなく、次のような関数が使用された場合にのみ、ルーティングガード関数がトリガーされます。$ Router。**
this.$Router.push('/pages/login/login')
2番目の方法：ルーティングテーブルを自動的に作成する
プロセスは公式ウェブサイトと同じです
vue.config.jsを追加し、uni-read-pagesを導入した後、再起動する必要があるという小さなリマインダーがあります。！！何度も試してみて、導入したプロセスに問題があると思ったのですが、再起動しなかったので、編集して再起動しました。
インポート結果は上のスクリーンショットと同じです。最初にページにアクセスしたときにルートインターセプトはトリガーされず、this。$ Router。**が使用されていない場合はトリガーされません。ここでの問題も私が紹介したプロセスの問題。ようこそ親愛なる友人、私を啓発してください。
実施する！
他のプラグインは将来導入され、更新される予定です。楽しみにしています！