Приложение Nuggets на базе uniapp

Vue.js

Приложение Nuggets на базе uniapp

задний план

Изначально я использовал kotlin+jetpack для написания версии приложения Nuggets, но из-за незнания большого количества знаний о написании приложений для Android в первый раз и по рабочим причинам осталось еще много не доделанных функций с перерывами.Позже наггетсы обновляли фон,структуру данных и интерфейс.Изменений было очень много,поэтому я решил использовать uniapp для написания версии сначала(в письменном виде,а функции будут обновляться один за другим),Собственная версия Android будет определена.

git-адрес

uni-app:git ee.com/Entertainment — это роутер/uyou…

котлин+джетпак:git ee.com/Индустрия развлечений — это роутер/сон…

Структура каталогов


└──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": "我"
			}
		]
	}
}

предварительный просмотр

Установка приложений с помощью NoxPlayer

Создайте среду разработки

Разработка теперь на стороне H5 (поскольку симулятор не может обновляться в реальном времени после сохранения кода), организованной по цепочке безопасности Nuggets 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 нормальная.Лучше использовать реальную машину для тест. При использовании веб-представления в части сведений макет приложения и H5 отличается. Если их много, сторона приложения будет занимать всю страницу, поэтому рассмотрите возможность настройки макета, чтобы он не следовал макету приложения Nuggets.

Категории