uni-app

官方文档及资源 uni-app 原生插件文档： https://uniapp.dcloud.io/api/extend/native-plugin uni-app 原生插件开发文档： https://nativesupport.dcloud.net.cn/NativePlugin/README App 离线 SDK 下载地址： https://nativesupport.dcloud.net.cn/AppDocs/download/android App 离线 SDK 下载解压后，使用 Android Studio 打开 UniPlugin-Hello-AS 工程，删除自带的三个模块: uniplugin_component uniplugin_module uniplugin_richalert 添加模块，将需要调用的 jar 包拷贝到新增模块的 libs文件夹下，并添加依赖： 编写 js 与 jar包相互调用的中间件： package com.example.handheld; import android.util.Log; import com.alibaba.fastjson.JSONObject; import com.cmcid.lib.Common; import com.cmcid.lib.Device; import com.cmcid.lib

var main = plus.android.runtimeMainActivity(); var pkName = main.getPackageName(); var uid = main.getApplicationInfo().plusGetAttribute("uid" ); var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat" ); var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled(); // 未开通‘允许通知’权限，则弹窗提醒开通，并点击确认后，跳转到系统设置页面进行设置 if (! areNotificationsEnabled) { 　　uni.showModal({ 　　　　title: '提示' , 　　　　content: '请先打开APP通知权限' , 　　　　showCancel: false , 　　　　success: function (res) { 　　　　　　if (res.confirm) { 　　　　　　　　var Intent = plus

传统vue导入： 1. 导入一个vue组件： 2. 全局导入vue组件，即每个页面都可以直接使用而不用引用和注册的话，在项目根目录下的main.js里处理： 传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精髓为一步，只需组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用： 不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。 在 uni-app 插件市场下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。 下为简单导入效果 来源： oschina 链接： https://my.oschina.net/u/4330568/blog/4575271

使用pdf.js、pdfh5.js、pdfworker.js、web-view。跳转到外部链接页面，进行查看pdf文件； uniapp中的web-view跳转到本地文件，需要在根目录下创建hybrid目录。下面在创建html文件夹。详见： 步骤 建立对应文件夹，hybrid和html文件夹；把文件复制进去； 然后准备一个vue页面，里面是web-view，如下： <template> <view> <web-view :src="url"></web-view> </view> </template> <script> export default { data () { return { url: '', // pdf链接 } }, onLoad (options) { let links = decodeURIComponent(options.links); // 设置连接地址； this.url = `/hybrid/html/pdf.html?url=${links}`; }, } </script> 然后有需要预览pdf的页面，把pdf的地址传过来就可以了，如：（我这个web-view页面名字是report） goReport (url) { let links = encodeURIComponent(url) uni.navigateTo({ url: '..

uni-app实现了一套代码，同时运行到多个平台。支持iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具 工具安装 开发uni-app需要安装HBuilder X. 下载地址 。 下载成功后直接解压即可 简单的配置一下开发偏好： 创建第一个uni-app 点击左上角【文件】>>【新建】>>【项目】，选择uni-app模板。 uni-app目录结构 目录结构基本和小程序的目录结构相似，只是多了个基础组件的文件夹； uni-app有自己的插件库，直接点击安装即可，而且，它也支持npm包管理，点击【工具】>> 【插件安装】即可配置 好了，基本的安装工作就是这么多，下面我们看一下如何调试 调试 浏览器 uni-app支持多个端同时调试，这也是它最便捷的地方，首先看一下浏览器端的调试： 调试之前我们首先要配置一下你的浏览器的安装路径，默认HBuilder是检测不到的 点击【运行】>>【运行到浏览器】>> 【配置web服务器】 把浏览器的安装路径粘贴在里边即可 然后就能够调试了 然后我们看一下真机 手机调试 以安卓手机为例，需要开启开发者模式才能进行调试，方法如下： 打开【设置】>> 【关于本机】，找到【软件版本】，连续点击五次，即可开启开发者选项 开发者选项的开启和关闭在【设置】 >> 【高级设置】>> 【开发者选项】，如下

uni-app编译版 一、配置微信小程序 配置小程序服务域名、获取小程序ID和密钥 二、uni-app编译版 1、进到商城后台下载源码 2、下载完成后打开，解压打开代码修改api路径，示例( https://baidu.com ) 3、部署到微信开发者工具上面 4、到微信开发者工具上面上传代码 来源： oschina 链接： https://my.oschina.net/u/4103048/blog/4483245

应用介绍： 非常有意思的猜一字题闯关游戏，开动你的小脑筋来一场最有趣的答题历险； 题目虽然看似简单，但词汇难度在不断的提升哦，当不熟悉的成语出现时玩家就需要好好思考一下了； 利用两个汉字的优势，当一个字谜无法攻破的时候玩家就需要从另外使用提供的解析； 功能介绍： 考验智力考验脑力的一款游戏，换了不断的关卡挑战，来一场最有趣的闯关大战吧，精彩不停的玩模式，将时下最热门的字谜融入到游戏中，邀请好友和你一起加入挑战，看看谁能最快通关吧。做题有奖是一款微信小程序猜字谜文字游戏。答题正确奖励R币。兑换成微信钱包现金, 简单操作, 高手五分钟即时 可 提 现 1 元 。 \color{#FF0000}{可提现1元。} 可 提 现 1 元 。 程序体验： 程序浏览： 下载地址： 提供的源码可以同步编译成 小程序 APP H5源码各个版本, 具体操作不属于本文章范围，不做教程了。 如有不清楚如何操作的，留言咨询吧。 下载地址 配置代码： 接口地址在mian.js中，requstUrl地址换成你自己的 // 请求过渡状态 loadModal: false, isLogin: 'CLOSE', // 数据接口地址 requstUrl: "http://192.168.1.20:8081/duties/api/", loginOk: function() { console.log("登陆成功");

四、 目录结构 一个uni-app工程，默认包含如下目录及文件： 五、资源路径说明 １）template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径： <!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 --> <image class="logo" src="/static/logo.png"></image> <image class="logo" src="@/static/logo.png"></image> <!-- 相对路径 --> <image class="logo" src="../../static/logo.png"></image> 注意： @开头的绝对路径以及相对路径会经过base64转换规则校验 H5平台小于4kb的资源会被转换成base64，其余平台不转。 支付宝小程序组件内 image 标签不可使用相对路径。 ２） js文件或script标签内（包括renderjs等）引入js文件时，可以使用相对路径和绝对路径： // 绝对路径，@指向项目根目录，在cli项目中@指向src目录 import add from '@/common/add.js' // 相对路径 import add from '../../common/add.js

一 点睛 1 官网 http://uniapp.dcloud.io/platform?id=%E8%B7%A8%E7%AB%AF%E5%85%BC%E5%AE%B9 二 代码 1 修改 phone.vue <template> <view> <button type="primary" @click="updatePhoto">上传图片</button> <image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image> <!-- #ifdef H5 --> <view>在H5中可见</view> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <view>在微信小程序中可见</view> <!-- #endif --> </view> </template> <script> export default { data() { return { imgArr: [] } }, methods: { updatePhoto() { uni.chooseImage({ count: 5, //默认9 success: res => { this.imgArr = res.tempFilePaths } }); }, previewImg(current) {

一 官网 1 声明式跳转 http://uniapp.dcloud.io/component/navigator 2 编程式跳转 http://uniapp.dcloud.io/api/router?id=navigateto http://uniapp.dcloud.io/api/router?id=switchtab 二 代码 1 新建 navigator.vue <template> <view> <view>导航跳转的学习</view> <navigator url="/pages/detail/detail?name=cakin&age=19">跳转到详细页并传参</navigator> <navigator url="/pages/message/message" open-type="switchTab">跳转到信息页</navigator> <!-- redirect：将当前页面关闭，再进入下一个页面,如果不加，还会返回到当前页面--> <navigator url="/pages/detail/detail" open-type="redirect">跳转到详细页</navigator> <button @click="goDetail">跳转到详情页</button> <button @click="goMessage" type="primary"