uni-app を使用してアプリの簡単なチュートリアルを開発する

序文

仕事をしていると、アプリを開発する必要に迫られることがありますが、会社にはandriondやiosがありません.この時点で外注したくない場合は、フロントエンドをプレイする必要があります.この記事では、その使用法を紹介します. uinapp+webview でアプリ シェルを作成し、アプリ全体 埋め込みの h5 メソッドを使用して APP を開発します。

アプリの開発手順

1. uniapp 開発者アカウントを申請する

uniapp はエンタープライズ アカウントを持っていないので、公開メール アドレスを申請して登録するだけです. ログイン
登録アドレス: https://dev.dcloud.net.cn/

2. ログイン後、新規アプリを作成

3. HBuilder X をダウンロードしてインストールします。

リンク: https://www.dcloud.io/hbuilderx.html

4. 新規プロジェクト

File->New->Project


本当はアプリを開発したくないので、WebView が欲しいだけなので、デフォルトのテンプレートを選択してください

5. webview を開き、pages-index に小さなコードを記述します。

一部の構成の更新を容易にするために、確認済みのサーバーに webview によって開かれるリンクを配置し、webview の @message を使用して h5 によって返されたメッセージを監視し、カメラの電源を入れる、電源を入れるように要求するなどのネイティブ操作を実行します。 Bluetoothなどで。

<template>
	<view>
		<web-view :src="url" @message="getMessage"></web-view>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				url: ''
			}
		},
		onLoad(options) {
    
    
			uni.request({
    
    
				// new Date().getTime()是为了确保不用缓存
				url: 'https://存放配置的服务器/config.json?t=' + new Date().getTime(),
				complete: (res)=> {
    
    
					let url = "默认链接";
					if(res.statusCode == 200){
    
    
						url = res.data.url;
					}
					// 可以获取用户设备号
					let pinf = plus.push.getClientInfo(); 
					let cid = pinf && pinf.clientid || '';
					// 处理服务器配置的链接
					let d = url.indexOf('?') > -1? '&' : '?';
					this.url = `${
      
      url}${
      
      d}t=${
      
      new Date().getTime()}&cid=${
      
      cid}`
				}
			});
		},
		methods: {
    
    
			// 可以把开启蓝牙、定位等原生操作放在webview消息里面回传
			getMessage(event) {
    
    
				let data = event.detail.data;
				if(data.action){
    
    
					uni[data.action](data.options)
				}
			}
		}
	}
</script>
<style>
</style>

6. manifest.json を構成する

1. 最初はIDとパッケージ名です
   

2. 次に、アプリのアイコンがあります。1024x1024 のアイコンを用意すると、hbuilder が自動的に解像度を変換してくれます。
   

3. appモジュールの設定はpush機能しか使っていないので、uniappドキュメントを追加で読む必要があると穴を踏むのは簡単です。ただし、uniapp は技術サポートも提供しますが、料金がかかります。個々の開発者は、質問に答えることで追加のお金を稼ぐこともできます。

4. 次に、一般的にポジショニング機能とカメラ機能であるパー​​ミッションがあります。どの構成アイテムがどれであるかをどのように知ることができますか? 実際、命名は非常に明確で、カメラ（カメラ）、capture_audio_output（キャプチャオーディオ出力）であり、次にuniapp公式Webサイトにアクセスして検索し、安全であることを確認します
   

7. 梱包

ネイティブ パッケージは面倒すぎる、直接クラウド パッケージを使用して

証明書を入力する、証明書生成チュートリアル
注:
1. 高速で安全なパッケージには問題がある可能性があります。従来のパッケージを使用してください
2. 証明書とパスワードの保存に注意してください。 git にアップロードするには
3. ios の場合は、ios 開発アカウントを申請する必要があります.チュートリアル
4. 実は、パッケージング パネルに「証明書の生成方法」というボタンがあり、その中にチュートリアルがあります. 5
.パッケージ名は非常に重要で、安易に変更することはできません.最初から適切な名前を選択する必要があります.

h5 プロジェクト構成

uniapp を使っているので、作者は vue を使っていたに違いない

htmlでuniapp-sdkを導入

公式 Web サイトには cdn が用意されています。自分でダウンロードして、ローカルまたは会社の cdn に配置できます。

<script src="static/js/uniapp-sdk.js"></script>

背中の問題を修正

アプリ全体がh5のシェルなので、戻るボタンでページを抜けられないという問題が発生するので、uniapp-sdkを使ってネイティブの戻るメソッドを呼び出す必要があります
。

const control = {
    
    
	// 在这些页面上后退按钮点两次会退出app
    homePaths: ['/index','/login'],
    state: [],
    vueObj: null,
    init(vueObj){
    
    
        this.vueObj = vueObj;
        this.addListener();
        return this;
    },
    // 判断是否首页（需要后退能退出app的页面）
    isHome(path) {
    
    
    	return this.homePaths.includes(path);
    },
    // 在beforeEnter里面加上它，把路由状态保存起来
    pushState(path) {
    
    
        if(path!==this.state[this.state.length-1]){
    
    
        	this.state.push(path);
        }
    },
    // 页面在后退的地方调用它
    back() {
    
    
    	// 在首页等需要退出app的地方直接后退
        if(this.isHome(this.vueObj.$route.path)){
    
    
            window.uni.navigateBack();
            return
        }
        // 如果在非app环境刷新了页面
        if(this.state.length){
    
    
        	// 自己的路由状态保存
            this.state.pop();
            // 这里这么写是因为有些手机后退，页面状态会很奇怪，所有即使直接push上一个页面进来
            this.vueObj.$router.push({
    
     path: this.state[this.state.length-1] });
        } else {
    
    
            history.go(-1);
        }
    },
    // 监听后退按钮
    addListener(){
    
    
    	// 本地开发的时候不用监听后退
         if(typeof window.plus === 'undefined'){
    
    
             console.log("当前不是app环境");
             return;
        }
        const _this = this;
        document.addEventListener('UniAppJSBridgeReady', function() {
    
    
            var webview = window.plus.webview.currentWebview(); 
            window.plus.key.addEventListener('backbutton', function() {
    
    
                webview.canBack(function(e) {
    
    
                    if (e.canBack) {
    
    
                        _this.back();
                    } else {
    
    
                        window.uni.navigateBack();
                    }
                })
            });
        })
    }
};
export default control;

独自のルーティング コントロールを使用して、
Vue の main.js に挿入します

import Vue from 'vue';
import VueRouter from 'vue-router';
import HistoryCtrl from "static/js/history-ctrl";
const router = new VueRouter({
    
    
    routes: routerConfig
});
router.beforeEach(async (to, from, next) => {
    
    
	// 自己的路由
    HistoryCtrl.pushState(to.path);
    next();
});
const vueObj = new Vue({
    
    
    el: "#app",
    router,
    store
});
// 把自己做的前进后退挂载到vue里面方便调用
Vue.prototype.$historyctrl = HistoryCtrl.init(vueObj);
// 解决弹窗遮罩滑动穿透的问题
document.querySelector('body').addEventListener('touchmove', function(e) {
    
    
    e.preventDefault();
})

ページ内の戻るだけを使用する場合

this.$historyctrl.back();

棚に置く

正直なところ、これを行うアプリは棚に適しておらず、低すぎて、基本的に顧客の私的使用のために契約されています。
店頭に出したい場合は、エンタープライズ開発者を各携帯電話メーカーに登録する必要があります。ビジネスライセンスのアップロードは最も基本的なもので、法人IDカード、特にvivoを必要とするものもあり、これは最も嫌で、法人がIDカードを保持する必要があるため、小規模企業にのみ適しています.一部のアプリ開発者に関して言えば、それは多くの場合、未知の会社です (ご存じのとおり)。
ここで文句を言わずにはいられません。棚にあるさまざまな携帯電話メーカーのチュートリアルに従って、ばかみたいに操作してください。