uniapp開發小程序

• 2020 年 11 月 22 日
• 筆記
• uniapp, 前端, 微信小程序

uniapp開發小程序

uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發佈到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平台

[uniapp官網](uni-app : //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)
}