码迷,mamicode.com
首页 > 移动开发 > 详细

Uni-app从入门到实战

时间:2020-08-18 14:06:22      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:图片   工具   text   页面   发展   ref   下载   代码   www   

前言

uni-app是一个使用vue.js开发跨平台应用的前端框架,开发者只需要编写一套代码,便可以发布到IOS、Android和微信小程序等多个平台。所以我打算学习下这个框架,快速浏览了一遍官网之后,在某课网买了一门uni-app入门到实战的课程,然后开启我的实战之旅。

为什么要学习uni-app

  • 移动端技术太多,跨端框架或是未来发展的趋势。
  • 一套代码多端发布,受开发者青睐。
  • 完整的生态,受企业青睐。

uni-app的开发工具

官网推荐的是HBuilderX,对uni-app的支持度很高,用起来简直是爱不释手。下载链接:https://www.dcloud.io/hbuilderx.html 

项目展示

在项目实战中,主要实现了首页功能模块、搜索页功能模块、标签页功能模块、详情页功能模块、关注页功能模块、个人信息页功能模块。效果图如下:

首页

 技术图片

 

搜索页

 技术图片

 

详情页

 技术图片

 

关注页

 技术图片

 

项目源码

项目源码我放在github上,链接是https://github.com/ll527563266/uni-news,大家有兴趣可以看看。

目录结构

├── cloudfunctions-aliyun       # 云函数
├── common                      # 常用的文件
│   │── api                     # 请求接口函数
├── components                  # 自定义组件
├── pages                       # 页面存放目录
├── static                      # 静态资源 (会被直接复制)
├── store                       # 全局 vuex store
├── unpackage                   # 编译后的文件存放目录
├── utils                       # 公用的工具类
├── App.vue                     # 入口页面
├── main.js                     # 入口文件 加载组件 初始化等
├── manifest.json               # 项目配置
├── pages.json                  # 页面配置
├── uni.scss                    # sass常用变量

结语

  • 目前我已经上手了这个框架,对于会vue.js的开发者来说,上手难度很低。
  • 我的代码会跟老师的源代码有点不一致,我改写过api的方法。大家要看该课程的源代码,可以切换到source分支查看。

 

Uni-app从入门到实战

标签:图片   工具   text   页面   发展   ref   下载   代码   www   

原文地址:https://www.cnblogs.com/wy99/p/13512261.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!