抖音小程序试水
This commit is contained in:
parent
3f1abfa35f
commit
5857e62e49
GPG Key ID:
BD85FF18B373C341
@ -6,6 +6,10 @@
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"mp-toutiao" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"mp-weixin" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
|
||||
@ -61,7 +61,6 @@
|
||||
"@dcloudio/uni-ui": "^1.5.6",
|
||||
"crypto-js": "^3.3.0",
|
||||
"destr": "^2.0.3",
|
||||
"moment": "^2.30.1",
|
||||
"pinia": "^2.2.4",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"qs": "6.7.0",
|
||||
|
||||
9984
pnpm-lock.yaml
9984
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
17
src/App.vue
17
src/App.vue
@ -31,6 +31,23 @@ export default {
|
||||
}
|
||||
});
|
||||
//#endif
|
||||
|
||||
// #ifdef MP-TOUTIAO
|
||||
uni.login({
|
||||
provider: 'toutiao', //使用抖音登录
|
||||
onlyAuthorize: false, //只授权，不弹出授权页面
|
||||
success(loginRes){
|
||||
console.log("登录信息", loginRes)
|
||||
|
||||
uni.getUserInfo({
|
||||
provider: 'toutiao',
|
||||
success(userInfoRes){
|
||||
console.log("用户信息", userInfoRes)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
onShow: function () {
|
||||
console.log('App Show')
|
||||
|
||||
@ -1,77 +1,78 @@
|
||||
<template>
|
||||
<view class="flex flex-col h-full">
|
||||
<NavBar/>
|
||||
<view class="flex flex-col h-full">
|
||||
<NavBar />
|
||||
|
||||
<view class="flex-1 flex-grow-1 min-h-0 content overflow-auto">
|
||||
<Banner/>
|
||||
<view class="flex-1 flex-grow-1 min-h-0 content overflow-auto">
|
||||
<Banner />
|
||||
|
||||
<HotPanel/>
|
||||
<HotPanel />
|
||||
|
||||
<ZhiHuHotList/>
|
||||
<ZhiHuHotList />
|
||||
|
||||
<view class="text-center">
|
||||
<text class="title">{{ title }}</text>
|
||||
</view>
|
||||
<view class="text-center">
|
||||
<text class="title">{{ now }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-center">
|
||||
<text class="title">{{ title }}</text>
|
||||
</view>
|
||||
<view class="text-center">
|
||||
<text class="title">{{ now }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import NavBar from "./components/nav-bar/index.vue"
|
||||
import Banner from "./components/banner/index.vue"
|
||||
import HotPanel from "./components/hot-panel/index.vue"
|
||||
import ZhiHuHotList from "./components/zhihu-hot-list/index.vue"
|
||||
let timer = null
|
||||
export default {
|
||||
components: {
|
||||
NavBar,
|
||||
Banner,
|
||||
HotPanel,
|
||||
ZhiHuHotList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// import moment from 'moment'
|
||||
import NavBar from "./components/nav-bar/index.vue"
|
||||
import Banner from "./components/banner/index.vue"
|
||||
import HotPanel from "./components/hot-panel/index.vue"
|
||||
import ZhiHuHotList from "./components/zhihu-hot-list/index.vue"
|
||||
let timer = null
|
||||
export default {
|
||||
components: {
|
||||
NavBar,
|
||||
Banner,
|
||||
HotPanel,
|
||||
ZhiHuHotList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
now: new Date().toTimeString(),
|
||||
// now: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
title: 'Hello',
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
now: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
title: 'Hello',
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
|
||||
if(timer){
|
||||
clearInterval(timer)
|
||||
}
|
||||
timer = setInterval(() => {
|
||||
// this.now = new moment().format('YYYY-MM-DD HH:mm:ss')
|
||||
this.now = new Date().toTimeString()
|
||||
}, 1000)
|
||||
|
||||
timer = setInterval(() => {
|
||||
this.now = new moment().format('YYYY-MM-DD HH:mm:ss')
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.banner {
|
||||
width: 750rpx;
|
||||
height: 420rpx;
|
||||
}
|
||||
.banner {
|
||||
width: 750rpx;
|
||||
height: 420rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
@ -3,117 +3,146 @@
|
||||
页面内容
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<image class="avatar" :src="ctx.avatarUrl"></image>
|
||||
</button>
|
||||
<input class="uni-input" placeholder="请输入昵称"/>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<image class="avatar" :src="ctx.avatarUrl"></image>
|
||||
</button>
|
||||
<input class="uni-input" placeholder="请输入昵称" />
|
||||
|
||||
<view class="warp">
|
||||
<button type="warn" @click="toTestPage">{{ t("my.toTestPage") }}</button>
|
||||
<button class="button" type="primary" @click="getLocation">{{ t('my.getLocation') }}</button>
|
||||
<button type="primary" @tap="getUserProfile" data-eventsync="true">获取用户信息</button>
|
||||
</view>
|
||||
|
||||
<navigator url="/sub-packages/test-page/pages/test-crypto">
|
||||
<button>{{ t('my.cryptoTestPage') }}</button>
|
||||
</navigator>
|
||||
<view class="warp">
|
||||
<button type="warn" @click="toTestPage">{{ t("my.toTestPage") }}</button>
|
||||
<button class="button" type="primary" @click="getLocation">{{ t('my.getLocation') }}</button>
|
||||
|
||||
<navigator url="/sub-packages/test-page/pages/test-camera">
|
||||
<button>{{ t('my.openCameraTestPage') }}</button>
|
||||
</navigator>
|
||||
<navigator url="/sub-packages/test-page/pages/test-crypto">
|
||||
<button>{{ t('my.cryptoTestPage') }}</button>
|
||||
</navigator>
|
||||
|
||||
<button class="button" @click="switchLanguage">{{t('language.switch')}} {{t(ctx.lang.switchTo)}}</button>
|
||||
</view>
|
||||
<navigator url="/sub-packages/test-page/pages/test-camera">
|
||||
<button>{{ t('my.openCameraTestPage') }}</button>
|
||||
</navigator>
|
||||
|
||||
<button class="button" @click="switchLanguage">{{t('language.switch')}} {{t(ctx.lang.switchTo)}}</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {reactive, watchEffect} from "vue"
|
||||
import {useI18n} from "vue-i18n"
|
||||
import {onReady} from "@dcloudio/uni-app";
|
||||
const {t, locale} = useI18n()
|
||||
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
|
||||
import {
|
||||
reactive,
|
||||
watchEffect
|
||||
} from "vue"
|
||||
import {
|
||||
useI18n
|
||||
} from "vue-i18n"
|
||||
import {
|
||||
onReady
|
||||
} from "@dcloudio/uni-app";
|
||||
const {
|
||||
t,
|
||||
locale
|
||||
} = useI18n()
|
||||
const defaultAvatarUrl =
|
||||
'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
|
||||
|
||||
const ctx = reactive({
|
||||
lang: {
|
||||
switchTo: ''
|
||||
},
|
||||
avatarUrl: defaultAvatarUrl,
|
||||
})
|
||||
const ctx = reactive({
|
||||
lang: {
|
||||
switchTo: ''
|
||||
},
|
||||
avatarUrl: defaultAvatarUrl,
|
||||
})
|
||||
|
||||
function onChooseAvatar(e) {
|
||||
const { avatarUrl } = e.detail
|
||||
ctx.avatarUrl = avatarUrl
|
||||
}
|
||||
function onChooseAvatar(e) {
|
||||
const {
|
||||
avatarUrl
|
||||
} = e.detail
|
||||
ctx.avatarUrl = avatarUrl
|
||||
}
|
||||
|
||||
function switchLanguage(){
|
||||
if(uni.getLocale().startsWith("en")){
|
||||
uni.setLocale("zh-Hans")
|
||||
locale.value = "zh-Hans"
|
||||
} else {
|
||||
uni.setLocale("en")
|
||||
locale.value = "en"
|
||||
}
|
||||
function switchLanguage() {
|
||||
if (uni.getLocale().startsWith("en")) {
|
||||
uni.setLocale("zh-Hans")
|
||||
locale.value = "zh-Hans"
|
||||
} else {
|
||||
uni.setLocale("en")
|
||||
locale.value = "en"
|
||||
}
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title: t("pages.my")
|
||||
})
|
||||
console.log(uni.getLocale())
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: t("pages.my")
|
||||
})
|
||||
console.log(uni.getLocale())
|
||||
}
|
||||
|
||||
function initLanguage(){
|
||||
if(uni.getLocale().startsWith("en")){
|
||||
ctx.lang.switchTo = "language.zhHans"
|
||||
} else {
|
||||
ctx.lang.switchTo = "language.en"
|
||||
}
|
||||
}
|
||||
function initLanguage() {
|
||||
if (uni.getLocale().startsWith("en")) {
|
||||
ctx.lang.switchTo = "language.zhHans"
|
||||
} else {
|
||||
ctx.lang.switchTo = "language.en"
|
||||
}
|
||||
}
|
||||
|
||||
watchEffect(()=>{
|
||||
initLanguage()
|
||||
})
|
||||
watchEffect(() => {
|
||||
initLanguage()
|
||||
})
|
||||
|
||||
onReady(()=>{
|
||||
initLanguage()
|
||||
uni.setNavigationBarTitle({
|
||||
title: t("pages.my")
|
||||
})
|
||||
})
|
||||
onReady(() => {
|
||||
initLanguage()
|
||||
uni.setNavigationBarTitle({
|
||||
title: t("pages.my")
|
||||
})
|
||||
})
|
||||
|
||||
function toTestPage(){
|
||||
uni.navigateTo({
|
||||
url: '/sub-packages/test-page/pages/test-page',
|
||||
animationDuration: 100
|
||||
})
|
||||
}
|
||||
function toTestPage() {
|
||||
uni.navigateTo({
|
||||
url: '/sub-packages/test-page/pages/test-page',
|
||||
animationDuration: 100
|
||||
})
|
||||
}
|
||||
|
||||
function getLocation(){
|
||||
uni.getLocation({
|
||||
type: "wgs84",
|
||||
success: function (res) {
|
||||
console.log(`当前位置: ${res.longitude},${res.latitude}`)
|
||||
uni.showModal({
|
||||
title: '获取位置成功',
|
||||
content: `当前位置: ${res.longitude},${res.latitude}`,
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log(err, `获取位置失败: ${err.errMsg}`)
|
||||
uni.showModal({
|
||||
title: '获取位置失败',
|
||||
content: `${err.errMsg}`,
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
function getLocation() {
|
||||
uni.getLocation({
|
||||
type: "wgs84",
|
||||
success: function(res) {
|
||||
console.log(`当前位置: ${res.longitude},${res.latitude}`)
|
||||
uni.showModal({
|
||||
title: '获取位置成功',
|
||||
content: `当前位置: ${res.longitude},${res.latitude}`,
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log(err, `获取位置失败: ${err.errMsg}`)
|
||||
uni.showModal({
|
||||
title: '获取位置失败',
|
||||
content: `${err.errMsg}`,
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getUserProfile() {
|
||||
uni.getUserProfile({
|
||||
desc: '获取你的昵称、头像、地区及性别',
|
||||
success(profileRes) {
|
||||
console.log("用户资料", profileRes)
|
||||
ctx.avatarUrl = profileRes.userInfo.avatarUrl
|
||||
},
|
||||
fail(res) {
|
||||
console.error("用户资料获取失败", res)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.warp {
|
||||
padding: 5rpx;
|
||||
}
|
||||
.button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.warp {
|
||||
padding: 5rpx;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,41 +1,53 @@
|
||||
import path from "path";
|
||||
import {fileURLToPath, URL} from 'node:url'
|
||||
import { defineConfig } from 'vite'
|
||||
import {
|
||||
fileURLToPath,
|
||||
URL
|
||||
} from 'node:url'
|
||||
import {
|
||||
defineConfig
|
||||
} from 'vite'
|
||||
import uni from '@dcloudio/vite-plugin-uni'
|
||||
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
|
||||
import {
|
||||
UnifiedViteWeappTailwindcssPlugin as uvwt
|
||||
} from "weapp-tailwindcss/vite";
|
||||
// 注意： 打包成 h5 和 app 都不需要开启插件配置
|
||||
const isH5 = process.env.UNI_PLATFORM === "h5";
|
||||
const isApp = process.env.UNI_PLATFORM === "app";
|
||||
const weAppTailwindcssDisabled = isH5 || isApp;
|
||||
const resolve = (p) => {
|
||||
return path.resolve(__dirname, p);
|
||||
return path.resolve(__dirname, p);
|
||||
};
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
build:{
|
||||
build: {
|
||||
|
||||
},
|
||||
plugins: [
|
||||
uni(),
|
||||
uvwt({
|
||||
rem2rpx: true,
|
||||
disabled: weAppTailwindcssDisabled
|
||||
})
|
||||
],
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
require("tailwindcss")({
|
||||
// 注意此处，手动传入 `tailwind.config.js` 的绝对路径
|
||||
config: resolve("./tailwind.config.js"),
|
||||
}),
|
||||
require("autoprefixer"),
|
||||
]
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
uni(),
|
||||
uvwt({
|
||||
rem2rpx: true,
|
||||
disabled: weAppTailwindcssDisabled
|
||||
})
|
||||
],
|
||||
define: {
|
||||
__VUE_I18N_FULL_INSTALL__: JSON.stringify(true),
|
||||
__VUE_I18N_LEGACY_API__: JSON.stringify(false),
|
||||
__INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
|
||||
},
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
require("tailwindcss")({
|
||||
// 注意此处，手动传入 `tailwind.config.js` 的绝对路径
|
||||
config: resolve("./tailwind.config.js"),
|
||||
}),
|
||||
require("autoprefixer"),
|
||||
]
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user