uniapp开发小程序

uniapp开发小程序

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台

[uniapp官网](uni-app : https://uniapp.dcloud.io/ )

快速上手

• 首先全局安装vue-cli

npm i @vue/cli -g

• 创建项目

vue create -p dcloudio/uni-preset-vue demouniapp

其中:-p preset 预设/预先设置好的一些配置(包含 webpack 的配置 和 uni 的配置);

=> 选择默认版本;

在微信开发者工具中打开的话需要修改生成的package.json文件:

  "serve": "npm run dev:mp-weixin",
  "build": "npm run build:mp-weixin",

• 运行项目

npm run serve
或者
npm rundev:mp-weixin

==> 会在项目目录生成一个dist的目录

我们可以用微信开发者工具打开dist/dev/mp-weixin目录;

之后我们可以用vue的语法写页面他会实时编译成微信小程序的语法了.

请求基地址封装

• 在根目录创建一个utils/request.js

export default Vue => {
  console.log(Vue)
//添加到vue原型上
  Vue.prototype.$http = function(config) {
    const BASE_URL = 'xxxxxx'
//这里返回的是promise
    return uni.request({
      url: BASE_URL + config.url,
    })
  }
}

• 我们在main.js中导入这个插件

import plugin from './utils/request.js'
Vue.use(plugin)

• 使用$http

async  getInfo(){
    const res=await this.$http({
        url:'/info'
    })
    console.log(res)
}