抖音平台小程序

App.vue 7.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <script>
  2. import { postJSON as $postJSON, get as $get } from "./config/util";
  3. import { api as $api } from "./config/api";
  4. import appInfo from "./config/appInfo";
  5. const router = require("./utils/router");
  6. export default {
  7. globalData: {
  8. isIOS: false, // 判断是否是ios
  9. isIphoneX: false, // 是否为 iphoneX 及以上机型
  10. statusBarHeight: 44, // 状态栏高度
  11. navBarHeight: 44, // 导航栏高度
  12. pageContentTop: 88, // 页面默认内边距
  13. $router: router,
  14. $appInfo: appInfo, // 小程序静态配置信息
  15. },
  16. onLaunch: function (options) {
  17. console.log("App onLaunch options => ", options);
  18. // 判断当前设备是否为 iphoneX 及以上机型
  19. this.handleGetIsIphoneX();
  20. // 判断当前小程序是否为最新版本
  21. this.handleVersionUpdate();
  22. // 登录
  23. this.handleLogin();
  24. },
  25. onShow: function (options) {
  26. console.log("App onShow options => ", options);
  27. },
  28. onHide: function (options) {
  29. console.log("App onHide options => ", options);
  30. },
  31. methods: {
  32. // 判断当前设备是否为 iphoneX 及以上机型
  33. handleGetIsIphoneX() {
  34. const systemInfo = uni.getSystemInfoSync();
  35. console.log("systemInfo => ", systemInfo);
  36. const _app = this.$scope || getApp(); // 兼容方式
  37. const menuButton = uni.getMenuButtonBoundingClientRect();
  38. // 导航栏高度
  39. _app.globalData.navBarHeight =
  40. menuButton.height + (menuButton.top - systemInfo.statusBarHeight) * 2;
  41. // 状态栏高度
  42. _app.globalData.statusBarHeight = systemInfo.statusBarHeight;
  43. // 页面内容内边距
  44. _app.globalData.pageContentTop =
  45. _app.globalData.navBarHeight + _app.globalData.statusBarHeight;
  46. if (systemInfo.system.toUpperCase().includes("IOS")) {
  47. _app.globalData.isIOS = true; // 判断是否是ios
  48. if (systemInfo.safeArea.top > 20) {
  49. _app.globalData.isIphoneX = true;
  50. }
  51. }
  52. },
  53. // 判断当前小程序是否为最新版本
  54. handleVersionUpdate() {
  55. const that = this;
  56. // 判断应用的 getUpdateManager 是否在当前版本可用
  57. if (uni.canIUse("getUpdateManager")) {
  58. const updateManager = uni.getUpdateManager();
  59. // 向小程序后台请求完新版本信息
  60. updateManager.onCheckForUpdate(function (res) {
  61. if (res.hasUpdate) {
  62. // 小程序有新版本,静默下载新版本,新版本下载完成
  63. updateManager.onUpdateReady(function () {
  64. uni.showModal({
  65. title: "更新提示",
  66. content: "小程序已发布新版本,是否重启应用?",
  67. success: function (res) {
  68. if (res.confirm) {
  69. updateManager.applyUpdate();
  70. } else if (res.cancel) {
  71. // 强制用户更新,弹出第二次弹窗
  72. uni.showModal({
  73. title: "提示",
  74. content: "小程序已发布新版本,是否重启应用",
  75. showCancel: false, // 隐藏取消按钮
  76. success: function (res) {
  77. // 第二次提示后,强制更新
  78. if (res.confirm) {
  79. // 当新版本下载完成,调用该方法会强制当前小程序应用上新版本并重启
  80. updateManager.applyUpdate();
  81. } else if (res.cancel) {
  82. // 重新回到版本更新提示
  83. that.handleVersionUpdate();
  84. }
  85. },
  86. });
  87. }
  88. },
  89. });
  90. });
  91. // 当新版本下载失败
  92. updateManager.onUpdateFailed(function () {
  93. uni.showModal({
  94. title: "提示",
  95. content: "小程序版本更新失败,请您删除当前小程序并重新打开",
  96. });
  97. });
  98. }
  99. });
  100. } else {
  101. // 提示用户在最新版本的客户端上体验
  102. uni.showModal({
  103. title: "温馨提示",
  104. content:
  105. "当前微信版本过低,可能无法使用该功能,请升级到最新版本后重试。",
  106. });
  107. }
  108. },
  109. // 显示获取用户信息确认弹框
  110. handleShowModal(content) {
  111. return new Promise((resolve) => {
  112. uni.showModal({
  113. title: "提示",
  114. content: content || "确定执行当前操作吗?",
  115. success: async (res) => {
  116. if (res.confirm) {
  117. resolve("确认");
  118. }
  119. },
  120. });
  121. });
  122. },
  123. // 设置导航栏标题
  124. handleSetNavTitle(title) {
  125. uni.setNavigationBarTitle({
  126. title: title || appInfo.appName,
  127. });
  128. },
  129. // 执行登录
  130. handleLogin() {
  131. return new Promise(async (resolve, reject) => {
  132. try {
  133. const res = await this.handleGetLoginInfo();
  134. // 将当前用户登录信息存储至本地(供后续手机号登录及业务使用)
  135. uni.setStorageSync("openid", res.openid || "");
  136. // uni.setStorageSync("user_id", res.user_id);
  137. // uni.setStorageSync("nickname", res.nickname);
  138. resolve(res)
  139. } catch (error) {
  140. reject(error)
  141. }
  142. })
  143. },
  144. // 获取用户微信登录信息
  145. handleGetLoginInfo() {
  146. return new Promise((resolve, reject) => {
  147. uni.login({
  148. success: async (res) => {
  149. const code = res.code;
  150. try {
  151. const { data: res = {} } = await $postJSON(
  152. $api.login_loginCode,
  153. {
  154. code,
  155. },
  156. {},
  157. false
  158. );
  159. console.log("res => ", res);
  160. if (res && res.errno == 0) {
  161. resolve(res.rst);
  162. } else {
  163. uni.showToast({ title: res.err, icon: "none" });
  164. reject(res.err);
  165. }
  166. } catch (error) {
  167. reject(error);
  168. console.log("error => ", error);
  169. }
  170. },
  171. });
  172. });
  173. },
  174. // 清空用户登录信息缓存
  175. handleClearUserInfo() {
  176. const USER_INFO_KEYS = [
  177. "token",
  178. "user_id",
  179. "userInfo",
  180. "nickname",
  181. "sex",
  182. "default_invite_code",
  183. "openid",
  184. "session_key",
  185. "unionid",
  186. ];
  187. USER_INFO_KEYS.forEach((key) => {
  188. uni.removeStorageSync(key);
  189. });
  190. },
  191. },
  192. };
  193. </script>
  194. <style lang="scss">
  195. @import "uview-ui/index.scss";
  196. @import "./static/style/commom.scss";
  197. /*每个页面公共css */
  198. // 去除u-navbar自定义导航栏下方分割线/底部下划线
  199. .u-border-bottom:after {
  200. border: none !important;
  201. }
  202. //统一背景颜色
  203. page {
  204. background: #f5f5f5;
  205. }
  206. </style>