理性者 發表於 2019-11-21 14:25:00

uni-app 使用本地打包配置安卓原生插件

<p>  在使用 uni-app 开发的时候,遇到了一个很棘手的问题。即获取设备参数的时候 uni-app 并没有相关方法,而安卓开发是可以做到的,因为接的是三方推广,所以功能必须实现,所以求助了安卓的大佬帮我们写了一个插件。</p>
<p>  uni-app 提供了以下方式来调用原生插件</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1609579/201911/1609579-20191121140341793-2105470368.png" alt=""></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;  我们可以通过这个方法来获取到插件,并且调用他。官方示例</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">const</span> dcRichAlert = uni.requireNativePlugin(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">DCloud-RichAlert</span><span style="color: rgba(128, 0, 0, 1)">'</span>)</pre>
</div>
<p><img src="https://img2018.cnblogs.com/i-beta/1609579/201911/1609579-20191121140508570-1928520283.png" alt=""></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>  so far so good,and then something bad happen。</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1609579/201911/1609579-20191121140715766-1104942045.png" alt=""></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;  what?公司的项目是禁止上传的,怎么破?</p>
<p>  后来老大研究了一下官方的示例,找到了使用原生插件本地打包的方法。</p>
<p>  首先需要在本地打包的文件夹下配置 dcloud_uniplugins.json 文件</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1609579/201911/1609579-20191121141312698-2083875165.png" alt=""></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;在文件内部声名自己调用的原生插件</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
    </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">nativePlugins</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">: [
    {
      </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">plugins</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">: [
      {
          </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">type</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">module</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
          </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">name</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">PhoneInfo</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,//调用插件的名称
          </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">class</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">com.app.uniplugin_appinfo.PhoneInfo</span><span style="color: rgba(128, 0, 0, 1)">"//插件方法全称</span><span style="color: rgba(0, 0, 0, 1)">
      }
      ]
    }
]
}</span></pre>
</div>
<p>然后在 libs 文件夹放入安卓写的插件</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1609579/201911/1609579-20191121141630635-823038348.png" alt=""></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;现在,插件的基本部署已经完成了,开始调用吧。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">const</span> plungin = uni.requireNativePlugin(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">PhoneInfo</span><span style="color: rgba(128, 0, 0, 1)">'</span>); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> PluginName 为原生插件名称</span></pre>
</div>
<div class="cnblogs_code">
<pre>plungin.getDeviceId(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">1</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,function(result){
    deviceid</span>=<span style="color: rgba(0, 0, 0, 1)">result;
    $HttpPost(url, {deviceid,ptype}, res </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      </span><span style="color: rgba(0, 0, 255, 1)">if</span> (res.data.code != <span style="color: rgba(128, 0, 128, 1)">200</span> || res.statusCode != <span style="color: rgba(128, 0, 128, 1)">200</span><span style="color: rgba(0, 0, 0, 1)">) {
            $Toast(</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">系统错误,请重试!</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">);
            </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">;
      }
      SetStorage(</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">webviewUrl</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">, res.data.data.Url);
      uni.navigateTo({
            url: </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/pages/web-view/web-view</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
      })
    })
})</span></pre>
</div>
<p>上面就完成了插件的调用,因为安卓的大佬第一次写 uni-app 的原生插件,所以完全照搬的官方示例的写法给我定义的方法,本来我只是需要一个返回值的,期待的是下面这种,得到的是上面这种。欸……心塞</p>
<div class="cnblogs_code">
<pre>deviceid=plungin.getDeviceId;</pre>
</div>
<p>&nbsp;</p><br><br>
来源:https://www.cnblogs.com/gitByLegend/p/11905415.html
頁: [1]
查看完整版本: uni-app 使用本地打包配置安卓原生插件