Shikong/uni-app-wx-study
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

抖音小程序试水

Browse Source
This commit is contained in:
shikong 2024-11-08 20:22:58 +08:00
parent 3f1abfa35f
commit 5857e62e49
Signed by: Shikong
GPG Key ID: BD85FF18B373C341
7 changed files with 5843 additions and 4575 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.hbuilderx/launch.json
View File

@ -6,6 +6,10 @@
{ {
"launchtype" : "local" "launchtype" : "local"
}, },
"mp-toutiao" :
{
"launchtype" : "local"
},
"mp-weixin" : "mp-weixin" :
{ {
"launchtype" : "local" "launchtype" : "local"

1
package.json
View File

@ -61,7 +61,6 @@
"@dcloudio/uni-ui": "^1.5.6", "@dcloudio/uni-ui": "^1.5.6",
"crypto-js": "^3.3.0", "crypto-js": "^3.3.0",
"destr": "^2.0.3", "destr": "^2.0.3",
"moment": "^2.30.1",
"pinia": "^2.2.4", "pinia": "^2.2.4",
"pinia-plugin-persistedstate": "^3.2.1", "pinia-plugin-persistedstate": "^3.2.1",
"qs": "6.7.0", "qs": "6.7.0",

9984
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

17
src/App.vue
View File

@ -31,6 +31,23 @@ export default {
} }
}); });
//#endif //#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 () { onShow: function () {
console.log('App Show') console.log('App Show')

121
src/pages/index/index.vue
View File

@ -1,77 +1,78 @@
<template> <template>
<view class="flex flex-col h-full"> <view class="flex flex-col h-full">
<NavBar/> <NavBar />
<view class="flex-1 flex-grow-1 min-h-0 content overflow-auto"> <view class="flex-1 flex-grow-1 min-h-0 content overflow-auto">
<Banner/> <Banner />
<HotPanel/> <HotPanel />
<ZhiHuHotList/> <ZhiHuHotList />
<view class="text-center"> <view class="text-center">
<text class="title">{{ title }}</text> <text class="title">{{ title }}</text>
</view> </view>
<view class="text-center"> <view class="text-center">
<text class="title">{{ now }}</text> <text class="title">{{ now }}</text>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import moment from 'moment' // import moment from 'moment'
import NavBar from "./components/nav-bar/index.vue" import NavBar from "./components/nav-bar/index.vue"
import Banner from "./components/banner/index.vue" import Banner from "./components/banner/index.vue"
import HotPanel from "./components/hot-panel/index.vue" import HotPanel from "./components/hot-panel/index.vue"
import ZhiHuHotList from "./components/zhihu-hot-list/index.vue" import ZhiHuHotList from "./components/zhihu-hot-list/index.vue"
let timer = null let timer = null
export default { export default {
components: { components: {
NavBar, NavBar,
Banner, Banner,
HotPanel, HotPanel,
ZhiHuHotList ZhiHuHotList
}, },
data() { data() {
return { 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', mounted() {
}
},
onLoad() {
}, if (timer) {
mounted() { clearInterval(timer)
}
if(timer){ timer = setInterval(() => {
clearInterval(timer) // 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') methods: {
}, 1000)
}, }
methods: { }
}
}
</script> </script>
<style> <style>
.banner { .banner {
width: 750rpx; width: 750rpx;
height: 420rpx; height: 420rpx;
} }
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.title { .title {
font-size: 36rpx; font-size: 36rpx;
color: #8f8f94; color: #8f8f94;
} }
</style> </style>

219
src/pages/my-info/my-info.vue
View File

@ -3,117 +3,146 @@
页面内容 页面内容
</view> </view>
<view class="uni-form-item uni-column"> <view class="uni-form-item uni-column">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="ctx.avatarUrl"></image> <image class="avatar" :src="ctx.avatarUrl"></image>
</button> </button>
<input class="uni-input" placeholder="请输入昵称"/> <input class="uni-input" placeholder="请输入昵称" />
</view>
<view class="warp"> <button type="primary" @tap="getUserProfile" data-eventsync="true">获取用户信息</button>
<button type="warn" @click="toTestPage">{{ t("my.toTestPage") }}</button> </view>
<button class="button" type="primary" @click="getLocation">{{ t('my.getLocation') }}</button>
<navigator url="/sub-packages/test-page/pages/test-crypto"> <view class="warp">
<button>{{ t('my.cryptoTestPage') }}</button> <button type="warn" @click="toTestPage">{{ t("my.toTestPage") }}</button>
</navigator> <button class="button" type="primary" @click="getLocation">{{ t('my.getLocation') }}</button>
<navigator url="/sub-packages/test-page/pages/test-camera"> <navigator url="/sub-packages/test-page/pages/test-crypto">
<button>{{ t('my.openCameraTestPage') }}</button> <button>{{ t('my.cryptoTestPage') }}</button>
</navigator> </navigator>
<button class="button" @click="switchLanguage">{{t('language.switch')}} {{t(ctx.lang.switchTo)}}</button> <navigator url="/sub-packages/test-page/pages/test-camera">
</view> <button>{{ t('my.openCameraTestPage') }}</button>
</navigator>
<button class="button" @click="switchLanguage">{{t('language.switch')}} {{t(ctx.lang.switchTo)}}</button>
</view>
</template> </template>
<script setup> <script setup>
import {reactive, watchEffect} from "vue" import {
import {useI18n} from "vue-i18n" reactive,
import {onReady} from "@dcloudio/uni-app"; watchEffect
const {t, locale} = useI18n() } from "vue"
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' 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({ const ctx = reactive({
lang: { lang: {
switchTo: '' switchTo: ''
}, },
avatarUrl: defaultAvatarUrl, avatarUrl: defaultAvatarUrl,
}) })
function onChooseAvatar(e) { function onChooseAvatar(e) {
const { avatarUrl } = e.detail const {
ctx.avatarUrl = avatarUrl avatarUrl
} } = e.detail
ctx.avatarUrl = avatarUrl
}
function switchLanguage(){ function switchLanguage() {
if(uni.getLocale().startsWith("en")){ if (uni.getLocale().startsWith("en")) {
uni.setLocale("zh-Hans") uni.setLocale("zh-Hans")
locale.value = "zh-Hans" locale.value = "zh-Hans"
} else { } else {
uni.setLocale("en") uni.setLocale("en")
locale.value = "en" locale.value = "en"
} }
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: t("pages.my") title: t("pages.my")
}) })
console.log(uni.getLocale()) console.log(uni.getLocale())
} }
function initLanguage(){ function initLanguage() {
if(uni.getLocale().startsWith("en")){ if (uni.getLocale().startsWith("en")) {
ctx.lang.switchTo = "language.zhHans" ctx.lang.switchTo = "language.zhHans"
} else { } else {
ctx.lang.switchTo = "language.en" ctx.lang.switchTo = "language.en"
} }
} }
watchEffect(()=>{ watchEffect(() => {
initLanguage() initLanguage()
}) })
onReady(()=>{ onReady(() => {
initLanguage() initLanguage()
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: t("pages.my") title: t("pages.my")
}) })
}) })
function toTestPage(){ function toTestPage() {
uni.navigateTo({ uni.navigateTo({
url: '/sub-packages/test-page/pages/test-page', url: '/sub-packages/test-page/pages/test-page',
animationDuration: 100 animationDuration: 100
}) })
} }
function getLocation(){ function getLocation() {
uni.getLocation({ uni.getLocation({
type: "wgs84", type: "wgs84",
success: function (res) { success: function(res) {
console.log(`当前位置: ${res.longitude},${res.latitude}`) console.log(`当前位置: ${res.longitude},${res.latitude}`)
uni.showModal({ uni.showModal({
title: '获取位置成功', title: '获取位置成功',
content: `当前位置: ${res.longitude},${res.latitude}`, content: `当前位置: ${res.longitude},${res.latitude}`,
showCancel: false showCancel: false
}) })
}, },
fail: function (err) { fail: function(err) {
console.log(err, `获取位置失败: ${err.errMsg}`) console.log(err, `获取位置失败: ${err.errMsg}`)
uni.showModal({ uni.showModal({
title: '获取位置失败', title: '获取位置失败',
content: `${err.errMsg}`, content: `${err.errMsg}`,
showCancel: false showCancel: false
}) })
} }
}) })
} }
function getUserProfile() {
uni.getUserProfile({
desc: '获取你的昵称、头像、地区及性别',
success(profileRes) {
console.log("用户资料", profileRes)
ctx.avatarUrl = profileRes.userInfo.avatarUrl
},
fail(res) {
console.error("用户资料获取失败", res)
}
})
}
</script> </script>
<style> <style>
.warp { .warp {
padding: 5rpx; padding: 5rpx;
} }
.button {
margin-bottom: 10px; .button {
} margin-bottom: 10px;
</style> }
</style>

72
vite.config.js
View File

@ -1,41 +1,53 @@
import path from "path"; import path from "path";
import {fileURLToPath, URL} from 'node:url' import {
import { defineConfig } from 'vite' fileURLToPath,
URL
} from 'node:url'
import {
defineConfig
} from 'vite'
import uni from '@dcloudio/vite-plugin-uni' 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 都不需要开启插件配置 // 注意： 打包成 h5 和 app 都不需要开启插件配置
const isH5 = process.env.UNI_PLATFORM === "h5"; const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app"; const isApp = process.env.UNI_PLATFORM === "app";
const weAppTailwindcssDisabled = isH5 || isApp; const weAppTailwindcssDisabled = isH5 || isApp;
const resolve = (p) => { const resolve = (p) => {
return path.resolve(__dirname, p); return path.resolve(__dirname, p);
}; };
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
build:{ build: {
}, },
plugins: [ plugins: [
uni(), uni(),
uvwt({ uvwt({
rem2rpx: true, rem2rpx: true,
disabled: weAppTailwindcssDisabled disabled: weAppTailwindcssDisabled
}) })
], ],
css: { define: {
postcss: { __VUE_I18N_FULL_INSTALL__: JSON.stringify(true),
plugins: [ __VUE_I18N_LEGACY_API__: JSON.stringify(false),
require("tailwindcss")({ __INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
// 注意此处，手动传入 `tailwind.config.js` 的绝对路径 },
config: resolve("./tailwind.config.js"), css: {
}), postcss: {
require("autoprefixer"), plugins: [
] require("tailwindcss")({
}, // 注意此处，手动传入 `tailwind.config.js` 的绝对路径
}, config: resolve("./tailwind.config.js"),
resolve: { }),
alias: { require("autoprefixer"),
'@': fileURLToPath(new URL('./src', import.meta.url)) ]
} },
} },
}) resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})