• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

uniapp开发小程序

开发技术 开发技术 3天前 4次浏览

uniapp开发小程序

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

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

快速上手

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

喜欢 (0)