小程序uni-app的api

小程序uni-app的api

      • uni api简介
      • uni api使用
    • uni-app自定义组件—传统方式
      • 核心步骤
    • uni-app自定义组件—easycom
      • 简介
      • 核心步骤
    • uni-app组件库uViewUI
      • uview介绍
      • 关键步骤

uni api简介

uni-api 指的是uni-app 针对一些 微信小程序api所做的封装它解决了两个问题

  1. 原生的小程序api不支持promise形式的调用(需要自己封装)
  2. 原生的微信小程序api不支持跨平台

uni api使用

  1. 改前缀。如 wx.request 修改 为 uni.request 即可。
  2. 如果该方法有返回值,那么 返回值是一个数组,第1项为错误信息,第2项才是想要的返回结果
async onLoad() {
  // 小程序练习请求接口: https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312
  const [error, res] = await uni.request({
  url: 'https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312'
  });
  console.log(res);
}

uni-app自定义组件—传统方式

核心步骤

  1. 创建组件
  2. 引入组件
  3. 注册组件
  4. 使用组件
    小程序uni-app的api_第1张图片

uni-app自定义组件—easycom

简介

easycom是uni-app提供的一种更加简单使用组件的规范

核心步骤

  1. 创建组件
    • 必须按照固定格式创建组件 /components/组件名称/组件名称.vue
  2. 使用组件
    小程序uni-app的api_第2张图片

uni-app组件库uViewUI

uview介绍

uView UI,是uni-app生态最优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水

关键步骤

  1. 安装依赖

    // 安装sass
    npm i sass -D
    
    // 安装sass-loader,注意需要版本10,否则可能会导致vue与sass的兼容问题而报错
    npm i sass-loader@10 -D
    
    // 安装uview-ui
    npm install [email protected]
    
  2. 全局引入uview js库

    main.js

    import uView from "uview-ui";
    Vue.use(uView);
    
  3. 全局引入uView的全局SCSS主题文件

    /* uni.scss */
    @import 'uview-ui/theme.scss';
    
  4. 全局引入uview 基础样式

    // 在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性
    
    
  5. 配置easycom模式引入uview组件

    // pages.json
    {
    	"easycom": {
    		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    	},
    	// 此为本身已有的内容
    	"pages": [
    		// ......
    	]
    }
    
  6. 配置vue.config.js文件

    // vue.config.js,如没有此文件则手动创建 放入项目根目录下
    module.exports = {
        transpileDependencies: ['uview-ui']
    }
    
  7. 使用uview组件

    
    
    
    
    

你可能感兴趣的:(小程序,uni-app,vue.js)