zoukankan      html  css  js  c++  java
  • 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)
    }
    
  • 相关阅读:
    python学习笔记
    Jenkins 共享库最佳实践
    django form 表单
    cenos7搭建openldap双主+keepalived+tls
    jenkins+ansible+gitlab
    centos7搭建zabbix3.4.13
    HTTP八种响应方式
    django administration 小记
    django manage.py 详解
    Django settings详解
  • 原文地址:https://www.cnblogs.com/caoyusong9527/p/14020049.html
Copyright © 2011-2022 走看看