# 前言

uni-app 太能吹了,我差点就信了,不过爷最喜欢吹了

DCloud 公司拥有 800 万开发者、数百万应用、12 亿手机端月活用户、数千款 uni-app 插件、70 + 微信 /qq 群

# 常用布局组件

view:块级元素,类似于 div,用来处理大布局
text:行内元素,处理文本
image:行内块元素,是图片标签 mode="aspectFill"
button:type="primary" 绿色的大按钮
block:没有意义,只是为了包裹元素,但是编译时不会产生标签
swiper: swiper-item 用来处理轮播图
navigator:链接标签,通过 url 指定页面跳转
scroll-view:滑块标签,需要设置很多内部属性
扩展组件:uni-icon、uni-rate ...

# 常用跳转 page/tab

redirectTo :关闭当前页面,跳转到应用内的某个页面
reLaunch :关闭所有页面,打开到应用内的某个页面

// 跳转页面:目标页面必须在 pages.json 中注册
uni.navigatorTo({
  url: '/pages/demo/demo'
})
// 跳转 tab:tab 一定是 tabBar 中定义的页面
uni.switchTab({
  url: '/pages/mine/mine'
})

# 获取登录授权的信息

通过给按钮 button 注册一个 uin-app 提供的 @getuserinfoopen-type="getUserInfo"
根据事件的函数拿到形参,形参中的 detail.rawData 就是用户的基本的信息
在 App.vue 中的生命周期函数的 onLaunch 中获取存储的基本信息
如果获取不到,那就是 undefinded 就跳转到登录页面,如果有就放行

onLaunch: function () {
  const users = uni.getStorageSync('users')
  if (users) {
    uni.switchTab({
      url: '/pages/index/index'
    })
  } else {
    uni.reLaunch({
      url: '/pages/login/login'
    })
  }
}

# 提示、确认、面板

// 提示面板:
uni.showToast({
  title: '标题',
  duration: 2000
})
// 确认面板:
uni.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success: function (res) {
    //res.confirm  确定
    //res.cancel   取消
  }
})
// 加载的面板:
uni.showLoading({
  title: '加载中'
})
uni.hideLoading()

# 请求方式和注意点

http 协议中的请求头,一共分为三种,分别解析 query stringJSON 和文件上传
一般都是后端提供说明,根据不同的方式使用不同的请求头
默认 get 请求和 post 请求都是解析 query string ,改变请求头只是解析 post 的请求体

const _that = this
uni.request({
  url: '',
  data: '',
  header: {
    'content-type': 'application/x-www-form-urlencoded'
  },
  success(res) {
    // 在回调函数内,不能使用 this, 需要在外部声明
  }
})

# 缓存操作

uni.setStorage({
  key: '键',
  data: '值',
  success() {}
})
uni.setStorageSync('key', 'data')
// 取值
uni.getStorageSync('key')

# 常用生命周期

onLoad(option){
//option 可以接收上一个页面的跳转路径的查询参数
},
onShow(){
// 在 App.vue 中使用过,用来处理登录拦截
},
onPullDownRefresh() {
// 需要在当前定义的页面的 style 中声明 enablePullDownRefresh 为 true
},
onReachBottom() {
// 上拉加载更多,可以在当前定义的页面的 style 中定义触发的底部距离
},
onShareAppMessage() {
  return {
    title: '',
    path: '',
    imgUrl: ''
  }
}

# 拨打电话

uni.makePhoneCall({
  phoneNumber: '...'
})

# 分享功能

onShareAppMessage(res) {
  return {
    title: '发送给好友',
    path: '/pages/index/index',
    imageUrl: '../../static/imgs/goods4.png'
  };
}

# 选择文件和上传文件

批量上传

function fun() {
  const _that = this
  uni.chooseImage({
    success: (res) => {
      const urlPath = res.tempFilePaths
      urlPath.forEach((item, i) => {
        uni.uploadFile({
          url: 'https://slimmings.healthmach.com/api/plugs/uploads',
          filePath: urlPath[i],
          name: 'files',
          success: (uploadFileRes) => {
            const { data, status } = JSON.parse(uploadFileRes.data)
            _that.imgList.push(_that.baseUrl + data)
            _that.imgList = _that.imgList.slice(0, 6)
            console.log(_that.imgList)
          }
        })
      })
    }
  })
}

查看图片

function previewImage(url) {
  uni.previewImage({
    urls: url,
    longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏']
    }
  })
}

# 登录和支付

uni.login(OBJECT) uni.requestPayment(OBJECT)

# 获取 openid

小程序启动就登录, uni.login 的方式获取 code 临时身份
根据 code 发起请求给自己的后端,然后后端携带 code、appid和appSecret 给微信获取 openid
后端再把获取到的 openid 返回给前端,存储到本地

uni.login({
  provider: 'weixin',
  success: function (res) {
    console.log(res)
    if (res.code && res.msg) {
      // 通过自己 code (临时身份) 去换取 openid
      uni.request({
        url: 'https://29.222.129.234:8080/request',
        data: {
          code: res.code
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: (res) => {
          // 拿到 openid
          const openid = res.data.openid
          // 把当前的值存储到本地
          uni.setStorageSync('openid', openid)
        }
      })
    }
  }
})

# 支付流程

先拿到 openid ,然后发起请求携带 openid 和订单数据给自己的后端
后端会根据固定的下单格式给微信的服务器,返回需要的字段
前端根据对应的字段,发起支付请求,调起支付的面板

fn() {
  const openid = uni.getStorageSync('openid')
  if (!openid) return
  // 在发请求下单之前,需要获取一些身份信息,携带当前的订单数据
  uni.request({
    url: 'https://29.222.129.234:8080/orders',
    data: {
      openid: openid,
      orders: [{id: 1,name: '二锅头',price: 12,num: 2},{id: 2,name: '茅台',price: 1200,num: 1}]
    },
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    success: (res) => {
      // 只有这次请求成功之后,后端才会返回数据,数据就是支付的信息
      // 调用 uni 提供的支付请求即可
      uni.requestPayment({
        provider: 'wxpay',
        // 时间戳
        timeStamp: res.timeStamp,
        // 随机值
        nonceStr: res.nonceStr,
        // 预支付的 id
        package: res.package,
        // MD5
        signType: 'MD5',
        // 签名
        paySign: res.paySign,
        success: function (res) {
          console.log('success:' + JSON.stringify(res))
        },
        fail: function (err) {
          console.log('fail:' + JSON.stringify(err))
        }
      })
    }
  })
}
更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

山河 微信支付

微信支付

山河 支付宝

支付宝

山河 贝宝

贝宝