uniapp开发APP从开发到上架全过程

前端时间受朋友委托帮他开发了一款APP，综合考虑了下，没有上原生，使用了uniapp这一套技术栈来进行开发uniapp是dcloud推出的一套跨端前端解决方案，可以通过一套代码生成小程序、安卓、IOS、H5等代码，对于中小项目来说是一套绝对的效率利器技术架构前端采用uniapp后端使用Thinkphp做后端管理和接口，用到了一套开源的后端管理系统easyadmin，之所以选用他是因为他能够通过一条命令自动生成curd管理页面，并且可以通过配置来快速实现字段表格、搜索等功能，可以说也是一个效率神器了。数据库采用了最常见的mysql数据库这个没什么好说的云存储使用了七牛云存储，因为项目中包含了大量的视频资源，因此将静态资源放置到云存储上是一个不错的选择开发uniapp的开发相对来说还是简单的，开发过Vue或者微信小程序的朋友几乎能无缝上手，只需要浏览下官方文档即可，其API与小程序的API的大同小异，基本将中的标签元素，不同的是普通HTML中使用的是<div>标签，而在uni中使用的是<view>标签，需要注意的是在template下只能包含一个view标签，其他标签则都包含在此标签下边。第二部分是script包括的JS代码，使用exportdefault对象将JS中的代码导出，内部结构则是Vue的数据结构，包含了data(),methods()等方法和一些uni的生命周期函数。第三部分则是style标签包裹的css代码，与HTML的css代码如出一辙。<template><view></view></template><script>exportdefault{data(){return{}},methods:{}}</script><style></style>页面配置uni中编写的所有页面都需要在pagejson中进行注册，未注册的页面则无法进行跳转和显示，在page数组中配置页面参数即可，也可以每个页面的对象下边配置style对象来定义页面的标题栏等信息通过配置globalStyle对象可以实现APP全局相关参数的配置，具体配置项可以参考uniapp官方文档(uni-app官网)另外也可以通过配置tabBar对象来实现自动生成APP的标签TABAPPVUEappvue是整个项目的主入口，在此处的onLaunch在APP初启动的时候会进行调用，可以在此处做一些APP初始化的相关操作<script>exportdefault{onLaunch:function(){consolelog('ApponLaunch')},onShow:function(){consolelog('AppShow')},onHide:function(){consolelog('AppHide')}}</script>同样，在此页面编写的css也会对所有页面起作用，可以将一些全局的css放在此处，如主题色之类。APP设置manifestjson是整个项目的设置文件，涵盖了项目的AppId、应用名称、版本以及APP、小程序的相关设置，通过Hbuilder编辑器可以以可视化的方式对项目进行设置，也可以通过源码视图来对项目进行设置请求封装作为一款可以上线运营的APP，必然是要可以展示各类数据的，而展示数据就需要对接后端API来进行，为了方便开发和后边维护，可以将请求单独封装为一个文件来进行统一处理。在项目根目录创建common文件夹，新建httpjs文件，在uni中想要引用外部Js，同样需要使用exportdefault将方法导出，因此httpjs中最后编写完的函数也要通过exportdefault{变量名称}的形式进行导出。uni提供了一个请求数据的API,unirequest(unirequest(OBJECT)|uni-app官网(dcloudnetcn))我们基于此API对请求进行封装，方便在调用接口的时候进行使用。constbaseUrl='https://wwwxxxcom/api/';/封装ajax函数@param{string}opttypehttp连接的方式，包括POST和GET两种方式@param{string}opturl发送请求的url@param{boolean}optasync是否为异步请求，true为异步的，false为同步的@param{object}optdata发送的参数，格式为对象类型@param{function}optsuccessajax发送并接收成功调用的回调函数/functiongetHeader(){//header头部return{"Accept":"application/json",'Content-Type':'application/json;charset=utf-8',//appheader头//'Content-Type':'application/x-www-form-urlencoded',//h5header头//'ACCESS_TOKEN':`${token}`,};}constajax=function(opt){unishowLoading({//title:"提交中"})opt=opt||{};optmethod=(optmethod&&optmethodtoUpperCase())||'POST';opturl=baseUrl+opturl||'';optasync=optasync||true;optdata=optdata||null;optsuccess=optsuccess||function(){};optfail=optfail||function(){};optcomplete=optcomplete||function(){};unirequest({method:optmethod,dataType:'json',url:opturl,data:optdata,header:getHeader(),success:(res)=>{unihideLoading()//consolelog(res)if(resdatacode==200){optsuccess(resdata);}else{unishowToast({title:resdatamessage,icon:"none"})optfail(res);}},fail:(res)=>{unihideLoading()consolelog(res)unishowToast({title:resdataresdatamessage:'网络连接失败',icon:"none"})consolelog(opt)optfail(res);},complete:(res)=>{unihideLoading()optcomplete(res);},})}为了统一管理，我将所有的后端API路径也都放在此处constbindAjax=function(data,success,fail){ajax({url:'xxx/xxx',method:'POST',data:data,success:function(res){if(rescode==200){success(resdata)}},fail:(e)=>{fail(e)}})}然后通过erxport将我们定义好的方法名暴露即可exportdefault{ajax,bindAjax}最后，想要在页面中调用，还需要在mainjs中创建全局变量importhttpfrom'/common/httpjs';Vueprototypehttp=http;这样我们就可以在页面中使用this来进行调用了thishttpbindAjax({a:1,b:2}(e)=>{//成功后返回的数据consolelog(e)},(e)=>{//请求失败})完整文件看这里(1条消息)uniapp统一请求封装-Javascript文档类资源-CSDN文库插件引用uniapp的另一个优点就是插件足够多，这样可以避免开发者重复造轮子，对于常用的插件开发者可以直接引用，极大的节省开发时间和成本。访问Dcloud插件市场(DCloud插件市场)即可以搜索需要的插件，如我们需要一块类似淘宝那样的搜索插件，就可以直接搜索“搜索插件”来进行检索找到我们需要的插件后，可以直接在插件详情页右侧选择使用HbuilderX导入插件，就可以将插件自动导入我们的项目中需要注意的是，要注意插件的平台兼容性，许多插件是专门为某个平台如微信小程序获安卓APP等进行设计的，那个如果我们将此插件使用到其他平台上则可能会引发兼容问题接下来，我们就可以开始愉快的编码了~下一篇，使用Hbuilder进行真机测试，敬请期待！

appid,服务器域名（域名下的资源文件要能访问，跟后端沟通，先放个html文件进去，比如：wwwxxxxcom/h5/indexhtml 能访问到）

企业H5应用工作台 可信域名配置 找管理员扫码登录 还有 应用主页配置

// 存

function setCookie(key, value) {

var initDate = new Date();

initDatesetTime(initDategetTime() + 30 60 1000);

documentcookie = key + "=" + value + ";expires=" + initDatetoGMTString() + ";path=/";

}

// 取

function getCookie(key) {

if (documentcookielength > 0) {

var i = documentcookieindexOf(key + "=")

if (i != -1) {

i = i + keylength + 1

var end = documentcookieindexOf(";", i)

if (end == -1) end = documentcookielength

return unescape(documentcookiesubstring(i, end))

}

}

return undefined

}

//删

function removeCookie(key) {

var exp = new Date();

expsetTime(expgetTime() - 1);

var val = getCookie(key);

if (val != null) {

documentcookie = key + "=" + val + ";expires=" + exptoGMTString();

}

}

export const Cookie = {

set: setCookie,

get: getCookie,

remove: removeCookie

}

import { Cookie } from "@/utils/cookiejs";

created() {

let local = 'http:xxxxcom/indexhtml'; // 这个是如果没有code需要配合微信重定向获取code的页面，也就是你后端放静态资源文件的路径，一定要可以访问到

if (!Cookieget("weCode")) {

windowlocationhref =

"https://openweixinqqcom/connect/oauth2/authorizeappid=" +

'企业号的appid' +

"&redirect_uri=" + encodeURIComponent(local) +

"&response_type=code&scope=snsapi_userinfowechat_redirect";

} else {

unireLaunch({

url: '/pages/index'

});

}

}

import { Cookie } from "@/utils/cookiejs"

onLaunch: function() {

thisgetCode()

},

getCode() {

let weCode = thisgetUrlParam("code"); //查看code是否存在

if (weCode) {

Cookieset("weCode", weCode)

getUserInfo({   // 这个是请求接口把code 给后台，然后后台给你用户的一些信息 getUserInfo不要照抄 这是一个请求方法

code: weCode

})then(res => {

if (resdatacode == 200) {

Cookieset('userId', resdatadata)

}

})

}

},

//判断code信息是否存在

getUrlParam(name) {

var reg = new RegExp("(^|&)" + name + "=([^&])(&|$)");

var r = windowlocationsearchsubstr(1)match(reg);

if (r != null) {

return unescape(r[2]);

}

return null;

}

{

"pages": [ 

{

"path": "pages/login/login",

"style": {

"navigationBarTitleText": "微信授权",

"navigationStyle": "custom",

"app-plus": {

"titleView": false,

"animationType": "none"

}

}

},{

"path": "pages/index",

"style": {

"navigationBarTitleText": "小测试首页",

"navigationStyle": "custom",

"app-plus": {

"titleView": false

}

}

}

],

"tabBar": {

"list": [{

"pagePath": "pages/index",

"iconPath": "static/tabIndexOffpng",

"selectedIconPath": "static/tabIndexOnpng",

"text": "首页"

}]

比如 http://wwwbaiducom 你就写 baiducom

比如：http://ms:xxx:7000 端口  你就写  ms:xxx:7000 

记得看微信官方文档！！！

贴出你需要看的链接：

1、通过unirequest或unidownloadFile函数来实现。unirequest主要用于请求服务器接口数据，而unidownloadFile主要用于下载文件，这两个方法都可以获取、音频、视频等流媒体数据，在请求或下载完成后，可以通过回调函数的参数来获取流媒体数据，如resdata或restempFilePath等。

2、在页面中显示获取到的流媒体数据，可以使用unipreviewImage、unicreateVideoContext、unicreateAudioContext等方法来进行预览或播放操作。将流媒体数据上传到服务器，可以使用uniuploadFile方法来上传，上传完成后，服务器会返回上传成功后的文件路径，再将该路径保存到后台数据库中，以便在前端页面中正确地获取该文件。

我们再开发web项目时，经常会遇到修改了css、js、html等静态文件，并部署到服务器之后。使用浏览器进行访问的时候，发现并没有什么变化，这就是静态缓存。我们应该如何处理静态缓存呢？首先我们先了解什么是静态缓存。

html文件添加Expires时间

CDN是静态缓存加速最典型的代表。CDN技术并不是一门新的技术，它是基于传统 nginx、squid、varnish 等 web 缓存技术，结合 DNS 智能解析的静态缓存加速技术。

方式二：

uniapp解决缓存的方式与vue一样，但是uniapp兼容了很多平台，所以修改vueconfigjs又不太一样。如果uniapp根目录下面没有vueconfigjs，则新建vueconfigjs文件即可。