现阶段市售各式各样「虚拟化」合作开发软件系统不断涌现，较为有指标性的是： UniApp、Flutter、 React Native、Taro、Weex之类。UniAPP 是如前所述「 Vue + QQ小流程 」语言管理体系，合作开发人员自学生产效率高上五小时，对是许多较大型民营企业，即使粗短快，省却许多人工生产成本，也可说是最差的优先选择。许多资源共享工程项目也已经开始采用了：事例
在此之前，生前是博客园的广度使用者，也碍于没Android小应用领域，做了两个小流程。每晚滴看该文。采用了非官方合作开发USB，没前端和资料库，0生产成本做了两个采用频密的QQ小流程，钟爱就往下哈哈
丰硕成果
预备
cnblogs API KEY 提出申请：https://oauth.cnblogs.com/
注册登记两个QQ小流程 门牌号
apiUSB文件格式：https://api.cnblogs.com/help
合作应用领域软件
QQ合作开发人员辅助工具
[uniapp非官方GUI](https://www.dcloud.io/hbuilderx.html)
自学走线
没碰触过 Vue.js，有 html、css、JavaScript 的此基础也能
假如你有过h5、原生植物小流程、mpvue等的合作开发实战经验，也能点对点并行到 uni-app，基本上没附加的自学生产成本大体上介绍Vue.js 句法
自学建立运转 uni-app 工程项目：介绍 uni-app 模块、路由器等科学知识，合作开发操作过程中须要特别注意的是uni-app中对vue句法的相容性
学会采用非官方辅助工具 HBuilder
自己合作开发个小功能看看效果
根据工程项目情况，继续补充 ES6、NPM 等科学知识
工程项目打包并上线到各平台
建立工程项目
添加uni-ui
打开连接；https://ext.dcloud.net.cn/plugin?id=55
点击导入插件：
出现uni_modules文件夹：
配置
登录QQ小流程后台
合作开发人员-合作开发管理-合作开发人员ID (AppID 小流程ID、AppSecret小流程密钥 )
小流程代码上传-IP白名单添加本地ip
服务器域名-request合法域名:
https://account.cnblogs.com
https://api.cnblogs.comtoken
1234567891011121314151617181920212223242526272829303132333435363738394041424344async function getToken() { const token = await requestFn({ url: /token, method: POST, data: { client_id: , client_secret: , grant_type: client_credentials }, header: { content-type: application/x-www-form-urlencoded } }) uni.setStorageSync(token, token.access_token); uni.setStorageSync(expires_in, token.expires_in); uni.setStorageSync(expires_in_start, moment().valueOf());}const baseUrl = https://api.cnblogs.com;async function requestFn(options) { return awaituni.request({ …options, url: baseUrl + options.url, header: { …{ Authorization: `Bearer ${uni.getStorageSync(token)}` }, …options.header }, }).then(res => { // console.log(res, res) const data = res[1] if (data.statusCode == 200) { return data.data } uni.showToast({ title: data.data.title, icon: none, duration: 4000 }); returndata.data })}page.json
1234567891011121314151617181920212223242526272829303132333435{ “pages”: [ { “path”: “pages/index/home”, “style”: { “navigationBarTitleText”: “代码改变世界” } }, { “path”: “pages/index/details”, “style”: { “navigationBarTitleText”: “博文” } }, { “path”: “pages/index/author”, “style”: { “navigationBarTitleText”: “” } }, { “path”: “pages/index/search”, “style”: { “navigationBarTitleText”: “找找看” } } ], “globalStyle”: { “navigationBarTextStyle”: “black”, “navigationBarTitleText”: “uni-app”, “navigationBarBackgroundColor”: “#F8F8F8”, “backgroundColor”: “#F8F8F8”, “onReachBottomDistance”: 200 }}首页
12345678910111213141516171819202122<template> <view class=”tabs”><scroll-view id=”tab-bar” class=”scroll-h” :scroll-x=”true” :show-scrollbar=”false” :scroll-into-view=”scrollInto”><view v-for=”(tab, index) in tabBars” :key=”tab.id” class=”uni-tab-item” :id=”tab.id” :data-current=”index” @click=”ontabtap”><text class=”uni-tab-item-title” :class=”tabIndex == index ? uni-tab-item-title-active : “>{{ tab.name }}</text> </view> </scroll-view><view class=”line-h”></view><swiper :current=”tabIndex” class=”swiper-box” style=”flex: 1;” :duration=”300″ @change=”ontabchange”><swiper-item class=”swiper-item” v-for=”(tab, index1) in newsList” :key=”index1″><scroll-view class=”scroll-v list” @scroll=”scroll” enableBackToTop=”true” :scroll-top=”120″ scroll-y @scrolltolower=”loadMore(index1)”><uni-search-bar v-if=”isShowSearch” @confirm=”search” v-model=”keyword”></uni-search-bar> <media-item :listData=”tab.data” /><view class=”loading-more” v-if=”tab.isLoading || tab.data.length > 4″> <text class=”loading-more-text”>{{ tab.loadingText }}</text></view> </scroll-view> </swiper-item> </swiper> </view></template>点赞收藏转发代码
123456789101112131415161718192021onShareAppMessage() { return { title: 代码改变世界, path: /pages/index/home, imageUrl: ../../static/logo.png };},onShareTimeline() { return { title: 代码改变世界, path: /pages/index/home, imageUrl: ../../static/logo.png };},onAddToFavorites() { return { title: 代码改变世界, path: /pages/index/home, imageUrl: ../../static/logo.png };},预览
上传代码
通过微信合作开发人员辅助工具发布-审核通过后-后台点击上线
读完全文的你不会找不到源码
