目前市面上各种「跨平台」开发解决方案层出不穷，比较有代表性的就是： UniApp、Flutter、 React Native、Taro、Weex等等。UniAPP 是基于「 Vue + 微信小程序 」语言体系，开发人员学习成本低上手快，对于是很多中小型企业，因为短小快，省去很多人工成本，也不失为最佳的选择。很多政企项目也开始使用了：案例
此前，本人是博客园的深度用户，也苦于没有安卓小应用，做了一个小程序。每天刷刷看文章。使用了官方开发接口，没有后端和数据库，0成本做了一个使用频繁的微信小程序，感兴趣就往下看吧
成果
准备
开发工具
学习路线
没有接触过 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文件夹：
配置
登录微信小程序后台
https://account.cnblogs.com
https://api.cnblogs.com
token
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| async 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 await uni.request({
...options,
url: baseUrl + options.url,
header: {
...{
'Authorization': `Bearer ${uni.getStorageSync('token')}`
},
...options.header
},
}).then(res => {
const data = res[1]
if (data.statusCode == 200) {
return data.data
}
uni.showToast({
title: data.data.title,
icon: 'none',
duration: 4000
});
return data.data
})
}
|
page.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| {
"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
}
}
|
首页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <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>
|
点赞收藏转发代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| onShareAppMessage() {
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'
};
},
|
运行项目
微信小程序运行：进入项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 选择微信开发者工具。
运行后，目录会多一个，这里就是各端编译后的文件：unpackage\dist\dev\mp-weixin
注意：需要打开微信开发工具，然后 设置 -> 安全 -> 服务端口 -> 开启。否则连接接不上。
预览
上传代码
通过微信开发者工具发布-审核通过后-后台点击上线
读完全文的你不会找不到源码
