uniapp开发方式及基本介绍

uniapp

开发方式

vue脚手架创建项目

• 全局安装脚手架——注意版本

  npm install @vue/cli@4.5.19 -g
  

• 查看安装版本

  vue -V
  

• 使用脚手架创建uniapp项目

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

• 找到项目路径——src/manifest.json,填入appid

  • 原生小程序中，修改appid是在project.config.json中修改的

    

• 在项目根目录下，运行编译uniapp项目

  npm run dev:mp-weixin
  

• 在微信开发者工具导入uniapp项目

  • 注意导入的路径——/dist/dev/mp-weixin

uview使用

1. 安装依赖

   npm i uview-ui@1.8.4 sass sass-loader
   

2. 全局引入uview.js库

   • 在main.js中引入

     import uView from "uview-ui"
     Vue.use(uView)
     

3. 全局引入uview.sass库

   • 在uni.scss中引入uview的sass主题库

     /* uni.scss */
     @import "uview-ui/theme/scss"
     

4. 全局引入uview主样式库

   • 在 App.vue 中 引入 uview 的 sass 主题库

     <style lang="scss">
     /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
     @import "uview-ui/index.scss";
     </style>
     

5. 配置easycom模式引入uview组件

   • 此配置需要在项目根目录的 pages.json 中进行

     {
     	"easycom": {
     		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
     	},
     	"pages": [
     		{}
     	]
     }
     

6. 使用uview组件

uniapp基础介绍

目录结构

生命周期

• 应用生命周期——使用小程序规范
  • onLaunch
• 页面生命周期——使用小程序规范
  • onLoad, onShow……
• 组件生命周期——使用Vue规范
  • created,destroyed……

easycom的使用

由uniapp提供的便捷使用自定义组件的技术

• 普通vue项目使用组件步骤
  1. 创建组件
  2. 引入组件
  3. 注册组件
  4. 使用组件
• easycom模式使用组件步骤
  1. 创建组件
     • 注意easycom规定的组件命名格式
       • components/组件名称/组件名称.vue
  2. 使用组件
     • 在页面中直接使用组件标签即可