一切都是浮云

# uni-app

# 开发方式

# uni-app 项目结构

注意： 文件名英文 否则npm 安装失败

md2

网址

# 1.脚手架搭建项目cmd

1.全局安装

npm install -g @vue/cli

2.创建项目

vue create -p dcloudio/uni-preset-vue my-project

3.启动项目

npm run dev:mp-weixin

yarn dev:mp-weixin

4.微信小程序开发者导入项目

image-20200711142546676

# 样式和sass

  • 支持小程序的rpx 和 h5的vw,vh
  • 内置sass配置 bug

npm i sass-loader node-sass

cnpm i sass-loader node-sass

yarn add sass-loader node-sass

npm install node-sass --save-dev 4.13.1 npm install sass-loader --save-dev 8.0.2 版本不能太高

 "dependencies":{
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2"   //9以上报错
}
  • vue 加入属性 lang="scss"
 "dependencies":{  //目前错误
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
}

官网

# 2.使用DHBuilderX来快速开发

image-20200711142636815

网址

uListMedia内置代码块

代码块快捷键

urq   ajax
unav   url

官网

# 3.API接口开发

列表

https://unidemo.dcloud.net.cn/api/news

  • 返回数据格式
  • id 新闻id 如 ： 72980
  • title 标题
  • created_at 创建时间
  • author_avatar 图标

详情

地址：https://unidemo.dcloud.net.cn/api/news/36kr/ + id (id为新闻id,上个页面传过来)

使用rich-text 【富文本组件】 来展示新闻内容

<rich-text class='rich-text' :nodes="strings"></rich-text >

# 封装接口

网址

# npm 安装

// 如果您的项目是HBuilder X创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y

// 安装
npm install uni-ajax

// 更新
npm update uni-ajax

← React →