Closed
Description
必备环境安装
1.配置JDK和Gradle环境
用的是1.8的版本,网上很多地方可以下载,这里不上链接了
在本地配置sdk变量,如图,点击桌面(计算机)->右键属性->高级系统设置->系统属性面板高级->点击环境变量->在下面框中的系统变量中新建
JAVA_HOME D:\Program Files\Java\jdk1.8.0_112//这个路径根据你安装JDK的环境对应其地址
PATH %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;//PATH本来是有内容的,不要全部替换,用分号隔开,再往后继续添加
CLASSPATH .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar//注意不要漏了前面的点
//新版本需要配置如下Gradle环境
GRADLE_HOME D:\Android_Studio\gradle\gradle-2.14.1-all //指向gradle的已解压文件的根目录配置path:
PATH %GRADLE_HOME%\bin //继续往PATH后面添加环境变量
2.下载Android SDK
推荐国内的android-studio下载
然后配置Android SDK环境,ANDROID_HOME定位到你的SDK文件夹的根目录
ANDROID_HOME D://android-sdk-windows //对应你的SDK文件夹的目录
重启电脑
Cordova安装
1.下载Node.js
2.在mac终端运行下面命令,输入密码安装cordova
sudo npm install -g cordova
如果是Window系统,去掉sudo
npm install -g cordova
sudo是因为需要管理员权限,-g是全局安装
cordvoa官网命令行帮助
3.执行以下代码创建一个cordvoa应用
cordova create hello com.example.hello HelloWorld
第一个参数是文件目录,第二个参数是app id, 第三个参数是显示的title
IOS打包
4.定位到hello目录文件夹,为项目安装平台模块
cd hello
cordova platform add ios
5.打开xcodeproj项目的文件位置双击打开,如果已安装Xcode就能顺利的打开项目了
6.可以用编写html项目的IDE打开www下的index.html查看效果,在浏览器打开即可
7.在Xcode打开iOS 模拟器如果看到以下效果说明环境已经搭建成功
ANDROID打包
续前面三步
4.定位到hello目录文件夹,为项目安装平台模块
cd hello
cordova platform add android
5.生成APK文件
cordova build android
遇到这个问题就是gradle下载失败了,可以尝试拿图中的链接手动下载然后把它放到对应的系统文件下,如下,注意版本一定要对应上
C:\Users\Administrator\.gradle\wrapper\dists\gradle-2.14.1-all\4cj8p00t3e5ni9e8iofg8ghvk7
gradle-2.14.1-all.zip下载地址
或者android-studio下载
成功就会显示如下
apk的目录如下:
项目路径\test\platforms\android\build\outputs\apk
6.更改应用桌面图标
在cordova生成项目的跟目录创建res文件夹
然后更改config.xml文件
ldpi : 36x36 px
mdpi : 48x48 px
hdpi : 72x72 px
xhdpi : 96x96 px
xxhdpi : 144x144 px
xxxhdpi : 192x192 px
<platform name="android">
<allow-intent href="market:*" />
<icon src="res/android/36.png" density="ldpi" />
<icon src="res/android/48.png" density="mdpi" />
<icon src="res/android/72.png" density="hdpi" />
<icon src="res/android/96.png" density="xhdpi" />
<icon src="res/android/144.png" density="xxhdpi" />
<icon src="res/android/192.png" density="xxxhdpi" />
</platform>
7.调用相机
cordova plugin add cordova-plugin-camera
安装成功就会在plugin出现两个文件夹cordova-plugin-camera
和cordova-plugin-compat
Activity
[-]Cordova配置[/-][+]Cordova配置&&Ionic配置[/+][-]Cordova配置&&Ionic配置[/-][+]Cordova配置&&Ionic配置(混合开发环境)[/+][-]Cordova配置&&Ionic配置(混合开发环境)[/-][+]Cordova配置&&Ionic配置(WebApp混合开发环境)[/+]Wscats commentedon Aug 3, 2016
其他注意事项
如果遇到我上面的情况,那就是xcode冲命名或者路径不对,因为我用了xcode-beta版本,所以我重新设置了路径就能正常使用了
[-]Cordova配置&&Ionic配置(WebApp混合开发环境)[/-][+]Cordova配置(WebApp混合开发环境)[/+]Wscats commentedon May 15, 2017
HBuilder 打包流程
1.运行HBuilder
百度搜索HBuilder,官网下载安装包,解压,运行HBuilder.exe。注册账号,并登陆

2.新建App
在左边右键,选择新建APP,或者点击中间的新建app

3.填入信息
在弹出的窗口,填应用名称,根据需求选择项目位置,以及模板内容,注意名字不要带有@等特殊字符,最后点击完成

4.真机调试
创建好之后,选择刚刚创建好的项目,在顶部选择运行,根据你的情况现在运行方式

5.真机演示
这是我刚刚选择的模板app展示,功能齐全,基本涵盖安卓常用的底层接口,如摄像头,地图,震动,下载等功能

6.打包成app
选择要打包的项目,在顶部选择运行,发布原生APK安装包

7.云端打包
在弹出的窗口,选择相应证书,如果参数配置未完成,点击顶部参数配置

8.图标配置
上传图标,如果不想逐个逐个图标替换,我们可以点击下方生成并替换

9.参数配置
这里的SDK配置选项要填上去才能打包,你可以暂时随机填一些乱串上去,最后就是保证所有提醒红叉的地方都要填满,微信登录,微信支付和微信消息及朋友圈的appid三者要统一,其他在测试时可随意
10.打包成app---选择要打包的项目,在顶部选择运行,发型原生安装包
11.云端打包
在弹出的窗口,选择相应证书,如果参数配置未完成,点击顶部参数配置,如果配置完成,点击底部打包

12.稍等一会儿
13.如果刚刚不小心关闭了,或者后面某天想找到打包的App,在顶部选择运行,根据需要选择查看。发送到手机上,安装试试
Wscats commentedon May 15, 2017
其他注意事项
真机调试过程中,如果出现如下错误提醒
勾选了以下几个选项就可以调试了

调用plus
之前试过用Vue写的项目,用hbuilder打包APP,在页面第一次加载的时候无法获取cookie,storage等
后来发现原来是一定要plus加载完毕之后才能获取对应的信息,所以如果用了其他框架写的项目不要直接加载对应的JS,可以改成这样
H5+支付接口
这里的官方文档的支付插件配置的请求DEMO是错误的,注意是用 POST 请求,而非 GET 请求
[-]Cordova配置(WebApp混合开发环境)[/-][+]Cordova配置(WebApp混合开发环境)&&Hbuilder打包配置[/+]Wscats commentedon Dec 15, 2018
调用定位
调用定位可选用这个方法
plus.geolocation.getCurrentPosition
当然我们可以把经纬度直接发到后台记录,实现实时跟踪定位
录音
调用
plus.audio.getRecorder()
获取音频对象,可以在成功的回调里面获取录音的地址播放
可以在上面把获取到的录音地址放进来用
plus.audio.createPlayer(this.path)
打开,然后播放音频信息,当然也可以播放其他格式的音频信息暂停播放
上传文件
前端上传逻辑可以直接使用H5的
input
配合FormData
格式后端逻辑,配合 express 和 multer 模块可以获取到传过来的文件
Wscats commentedon Feb 27, 2019
uni
uni-app
是一个使用Vue.js
开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序
等多个平台。目录结构
一个uni-app工程,默认包含如下目录及文件:
全局样式库
可以在
App.vue
组件里面引入uni.css
定义好的样式,配合已经写好的组件和模板快速开发应用生命周期
注意
页面生命周期
onPullDownRefresh
生命周期配合enablePullDownRefresh
使用在 js 中定义
onPullDownRefresh
处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。需要在pages.json
里,找到的当前页面的 pages 节点,并在 style 选项中开启enablePullDownRefresh
。当处理完数据刷新后,uni.stopPullDownRefresh
可以停止当前页面的下拉刷新。触底触发的生命周期
pages.json
配置路由和底部的
tabbar
,和小程序是差不多的,注意当我们在page
文件夹新建页面的时候,pages.json
文件的pages
内容会自动添加路由跳转
声明式导航:用绝对路径或者相对当前组件的相对路径,这里的路由跳转用了绝对路径
编程式导航
组件
可以使用
uni-app
帮我封装好的组件,但有几个比较注意的是,组件的名字不要用一些微信小程序或者一些常用的名字,我们可以在前面加个后缀,防止无效发起请求
可以使用
uni.request
发起请求调用微信小程序接口
这里注意要把小程序的单向数据绑定和指令改为
vue
的写法,也可以使用uni.createCameraContext()
兼容性会更好