caoyusong9527

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)
}

分类:

技术点:

相关文章: