基于uniapp的掘金app

背景

原本使用kotlin+jetpack编写了一版掘金app，但由于第一次写android应用很多知识不熟悉并且还有工作原因，断断续续还差很多功能未完成，后来掘金更新了后台，数据结构和接口改变很多，遂决定用uniapp先写一版（正在编写，功能陆续更新），安卓原生版待定。

git地址

uni-app:gitee.com/ylqslyq/uni…

kotlin+jetpack：gitee.com/ylqslyq/jue…

目录结构

└──common // 公共目录
	   └──components //公共组件
       └──css	
       └──minix
       └──utils // 工具类和方法
└──pages // tab页面
	   └──boilingPoint
       └──detail
       └──found
       └──index
       └──login
       └──my
├──services // 网络请求
├──static	// 静态资源
├──store	// 全局状态
├──unpackage
├──uview-ui	// 引入uview
└──viewpager  // 切换fragment
	   └──boilingPoint
       └──booklet
       └──home
├──App.vue
├──main.js
├──manifest.json
├──pages.json
├──uni.scss

路由和配置

{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/boilingPoint/index",
			"style": {
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/booklet/index",
			"style": {
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/found/index",
			"style": {
				"navigationStyle": "custom",
				"enablePullDownRefresh":true
			}
		},
		{
			"path": "pages/detail/articleDetail",
			"style": {
				"navigationBarTitleText": "详情",
				"navigationBarBackgroundColor":"#FFFFFF"
			}
		},
		{
			"path": "pages/my/index",
			"style": {
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/login/index",
			"style": {
				"navigationBarTitleText": "登陆"
			}
		}
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar":{
		"list":[
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/home_unselect.png",
				"selectedIconPath": "static/home_select.png",
				"text": "主页"
			},
			{
				"pagePath": "pages/boilingPoint/index",
				"iconPath": "static/recommend_unselect.png",
				"selectedIconPath": "static/recommend_select.png",
				"text": "沸点"
			},
			{
				"pagePath": "pages/found/index",
				"iconPath": "static/search_unselect.png",
				"selectedIconPath": "static/search_select.png",
				"text": "发现"
			},
			{
				"pagePath": "pages/booklet/index",
				"iconPath": "static/book_unselect.png",
				"selectedIconPath": "static/book_select.png",
				"text": "小册"
			},
			{
				"pagePath": "pages/my/index",
				"iconPath": "static/account_unselect.png",
				"selectedIconPath": "static/account_select.png",
				"text": "我"
			}
		]
	}
}

预览

使用夜神模拟器安装应用

搭建开发环境

现在开发是在H5端（由于模拟器在保存代码后不能实时更新），配置了nginx越过掘金的防盗链，配置如下

server {
            listen       8089;
            server_name  localhost;

            #charset koi8-r;

            #access_log  logs/host.access.log  main;

            location / {
                add_header Cache-Control no-cache;

                add_header Pragma no-cache;

                add_header Expires 0;
                proxy_pass   https://apinew.juejin.im;
                proxy_set_header referer 'https://juejin.cn';
                proxy_set_header origin 'https://juejin.cn';
                #root   html;
                #index  index.html index.htm;
            }
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
        

总结

使用uniapp开发后，在真机和模拟器上表现不同，比如我的页面中真机的字体偏小，H5端正常，最好还是使用真机测试，详情部分使用webview时app和H5布局显示相差较多，app端会占用整个页面，遂考虑调整布局不按掘金app的布局走。