uni-app学习笔记

最近恰好在做小程序,记录一些代码备忘。

1、提示语

uni.showToast({
    icon:'success',
    title: "提示内容"
})

2、对话框

uni.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

3、条件编译

<template></template>内的条件编译

<!-- #ifdef MP-WEIXIN -->
<!-- code -->
<!-- #endif -->

<script></script>内的条件编译

//#ifdef MP-WEIXIN
//code
//#endif

WEIXIN可换成QQ等

4、小程序函数传参

后端已存在id值,传递到godown函数

<button bindtap="godown" data-index="{{id}}" class="zan-btn zan-actionsheet__btn">
    <image class="down-icon" mode="aspectFit" src="../../images/godown.png"></image>
</button>
godown:function(e){
    let postid = e;
    uni.navigateTo({
        url: '/pages/download/download-data?id='+postid,
    })
}

5、全局变量的使用

定义全局变量

var postid = id
uni.setStorageSync('postid',postid)

使用全局变量

var psid = qq.getStorageSync('postid')
    qq.setClipboardData({              
    data: 'https://www.jishusongshu.com/?p='+psid,
    success(res) {
        qq.getClipboardData({
        success(res) {
            qq.showToast({
            title: '复制成功',
            });
        }
        })
    }
})

6、QQ登录用户信息

<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button
  qq:if="{{canIUse}}"
  open-type="getUserInfo"
  bindgetuserinfo="bindGetUserInfo"
>
  授权登录
</button>
<view qq:else>请升级QQ版本</view>
Page({
  data: {
    canIUse: qq.canIUse('button.open-type.getUserInfo')
  },
  onLoad() {
    // 查看是否授权
    qq.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称
          qq.getUserInfo({
            success(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo(e) {
    console.log(e.detail.userInfo)
  }
})

7、切换页面

uni.navigateTo({url: '...'})失效时,可使用uni.switchTab({url: '...'})

本文采用 CC BY-NC-SA 3.0 Unported 许可,转载请以超链接注明出处。
原文地址:uni-app学习笔记 作者:松鼠小
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
Source: Telegram @AmashiroNatsukiEars_NoWord Sticker
Source: Github @zhheo/Sticker-Heo
Source: github.com/k4yt3x/flowerhd
颜文字
AmashiroNatsukiEars
Heo
小恐龙
花!
上一篇
下一篇