{"id":1319,"date":"2023-03-18T11:29:16","date_gmt":"2023-03-18T03:29:16","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1319"},"modified":"2023-04-29T09:11:52","modified_gmt":"2023-04-29T01:11:52","slug":"taro-basic-tutorial-vue","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/18\/taro-basic-tutorial-vue\/","title":{"rendered":"Taro\u57fa\u7840\u6559\u7a0b\u4e4bVue"},"content":{"rendered":"

\u5728Taro<\/code>\u53ef\u4ee5\u901a\u8fc7import Vue from 'vue'<\/code>\u6765\u4f7f\u7528Vue<\/code>\uff0c\u4f46\u548c\u5728\u6d4f\u89c8\u5668\u4e2d\u4f7f\u7528Vue<\/code>\u4f9d\u7136\u6709\u4e00\u4e9b\u4e0d\u540c<\/p>\n

\u53c2\u8003\uff1ahttps:\/\/taro-docs.jd.com\/taro\/docs\/vue<\/a><\/p>\n

\u5165\u53e3\u7ec4\u4ef6<\/h2>\n

<\/p>\n

\u6bcf\u4e00\u4e2aTaro<\/code>\u5e94\u7528\u90fd\u9700\u8981\u4e00\u4e2a\u5165\u53e3\u7ec4\u4ef6\u7528\u6765\u6ce8\u518c\u5e94\u7528\uff0c\u5165\u53e3\u6587\u4ef6\u9ed8\u8ba4\u662fsrc<\/code>\u76ee\u5f55\u4e0b\u7684app.js<\/code>\u3002\u5728Taro<\/code>\u4e2d\u4f7f\u7528Vue<\/code>\uff0c\u5165\u53e3\u7ec4\u4ef6\u5fc5\u987b\u5bfc\u51fa\u4e00\u4e2aVue<\/code>\u7ec4\u4ef6\uff0c\u5728\u5165\u53e3\u7ec4\u4ef6\u4e2d\u6211\u4eec\u53ef\u4ee5\u8bbe\u7f6e\u5168\u5c40\u72b6\u6001\u6216\u8bbf\u95ee\u5c0f\u7a0b\u5e8f\u5165\u53e3\u5b9e\u4f8b\u7684\u751f\u547d\u5468\u671f\uff1a<\/p>\n

import Vue from 'vue'\n\/\/ \u5047\u8bbe\u6211\u4eec\u5df2\u7ecf\u5728 '.\/store' \u914d\u7f6e\u597d\u4e86 vuex\nimport store from '.\/store'\n\nconst App = new Vue({\n  store,\n  onShow (options) {\n  },\n  render(h) {\n    \/\/ this.$slots.default \u662f\u5c06\u8981\u4f1a\u6e32\u67d3\u7684\u9875\u9762\n    return h('block', this.$slots.default)\n  }\n})\n\nexport default App<\/code><\/pre>\n
\u5bf9\u4e8e\u4e00\u4e2a\u5165\u53e3\u6587\u4ef6(\u4f8b\u5982app.js<\/code>)\u800c\u8a00\uff0c\u6211\u4eec\u53ef\u4ee5\u65b0\u589e\u4e00\u4e2aapp.config.js<\/code>\u7684\u6587\u4ef6\u8fdb\u884c\u5168\u5c40\u914d\u7f6e\uff0capp.config.js<\/code>\u7684\u9ed8\u8ba4\u5bfc\u51fa\u5c31\u662f\u5c0f\u7a0b\u5e8f\u7684\u5168\u5c40\u914d\u7f6e:<\/p>\n
\/\/ app.config.js\nexport default {\n  pages: [\n    'pages\/index\/index'\n  ],\n  window: {\n    backgroundTextStyle: 'light',\n    navigationBarBackgroundColor: '#fff',\n    navigationBarTitleText: 'WeChat',\n    navigationBarTextStyle: 'black'\n  }\n}<\/code><\/pre>\n
\u751f\u547d\u5468\u671f<\/h3>\n
onLaunch()<\/h4>\n
\u5728\u5fae\u4fe1\/\u767e\u5ea6\/\u5b57\u8282\u8df3\u52a8\/\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u4e2d\u8fd9\u4e00\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5bf9\u5e94 app \u7684onLaunch<\/code><\/p>\n
\u76d1\u542c\u7a0b\u5e8f\u521d\u59cb\u5316\uff0c\u521d\u59cb\u5316\u5b8c\u6210\u65f6\u89e6\u53d1\uff08\u5168\u5c40\u53ea\u89e6\u53d1\u4e00\u6b21\uff09<\/p>\n
\u5728\u6b64\u751f\u547d\u5468\u671f\u4e2d\u901a\u8fc7getCurrentInstance().router.params<\/code>\uff0c\u53ef\u4ee5\u8bbf\u95ee\u5230\u7a0b\u5e8f\u521d\u59cb\u5316\u53c2\u6570<\/p>\n
created()<\/h4>\n
\u5728\u5fae\u4fe1\/\u767e\u5ea6\/\u5b57\u8282\u8df3\u52a8\/\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u4e2d\u8fd9\u4e00\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5bf9\u5e94 app \u7684onLaunch<\/code>\uff0c\u5728componentWillMount<\/code>\u540e\u6267\u884c<\/p>\n
\u76d1\u542c\u7a0b\u5e8f\u521d\u59cb\u5316\uff0c\u521d\u59cb\u5316\u5b8c\u6210\u65f6\u89e6\u53d1\uff08\u5168\u5c40\u53ea\u89e6\u53d1\u4e00\u6b21\uff09<\/p>\n
onShow()<\/h4>\n
\u5728\u5fae\u4fe1\/\u767e\u5ea6\/\u5b57\u8282\u8df3\u52a8\/\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u4e2d\u8fd9\u4e00\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5bf9\u5e94onShow<\/code>\uff0c\u5728 H5\/RN \u4e2d\u540c\u6b65\u5b9e\u73b0<\/p>\n
\u7a0b\u5e8f\u542f\u52a8\uff0c\u6216\u4ece\u540e\u53f0\u8fdb\u5165\u524d\u53f0\u663e\u793a\u65f6\u89e6\u53d1\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u4e5f\u53ef\u4ee5\u4f7f\u7528Taro.onAppShow<\/code>\u7ed1\u5b9a\u76d1\u542c<\/p>\n
\u5728\u6b64\u751f\u547d\u5468\u671f\u4e2d\u901a\u8fc7this.$router.params<\/code>\uff0c\u53ef\u4ee5\u8bbf\u95ee\u5230\u7a0b\u5e8f\u521d\u59cb\u5316\u53c2\u6570<\/p>\n
\u53c2\u6570\u4e0ecomponentWillMount<\/code>\u4e2d\u83b7\u53d6\u7684\u57fa\u672c\u4e00\u81f4\uff0c\u4f46\u767e\u5ea6\u5c0f\u7a0b\u5e8f\u4e2d\u8865\u5145entryType<\/code>\u548cappURL<\/code>\u4e24\u4e2a\u53c2\u6570<\/p>\n
onHide()<\/h4>\n
\u5728\u5fae\u4fe1\/\u767e\u5ea6\/\u5b57\u8282\u8df3\u52a8\/\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u4e2d\u8fd9\u4e00\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5bf9\u5e94onHide<\/code>\uff0c\u5728 H5\/RN \u4e2d\u540c\u6b65\u5b9e\u73b0<\/p>\n
\u7a0b\u5e8f\u4ece\u524d\u53f0\u8fdb\u5165\u540e\u53f0\u65f6\u89e6\u53d1\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u4e5f\u53ef\u4ee5\u4f7f\u7528Taro.onAppHide<\/code>\u7ed1\u5b9a\u76d1\u542c<\/p>\n
onError(String error)<\/h4>\n
\u5728\u5fae\u4fe1\/\u767e\u5ea6\/\u5b57\u8282\u8df3\u52a8\/\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u4e2d\u8fd9\u4e00\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5bf9\u5e94onError<\/code>\uff0cH5\/RN \u4e2d\u5c1a\u672a\u5b9e\u73b0<\/p>\n
\u7a0b\u5e8f\u53d1\u751f\u811a\u672c\u9519\u8bef\u6216 API \u8c03\u7528\u62a5\u9519\u65f6\u89e6\u53d1\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u4e5f\u53ef\u4ee5\u4f7f\u7528Taro.onError<\/code>\u7ed1\u5b9a\u76d1\u542c<\/p>\n
onPageNotFound(Object)<\/h4>\n
\u5728\u5fae\u4fe1\/\u5b57\u8282\u8df3\u52a8\u5c0f\u7a0b\u5e8f\u4e2d\u8fd9\u4e00\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5bf9\u5e94onPageNotFound<\/code>\uff0c\u5176\u4ed6\u7aef\u5c1a\u672a\u5b9e\u73b0
\n\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\uff0c\u57fa\u7840\u5e93 1.9.90 \u5f00\u59cb\u652f\u6301<\/p>\n
\u7a0b\u5e8f\u8981\u6253\u5f00\u7684\u9875\u9762\u4e0d\u5b58\u5728\u65f6\u89e6\u53d1\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u4e5f\u53ef\u4ee5\u4f7f\u7528Taro.onPageNotFound<\/code>\u7ed1\u5b9a\u76d1\u542c<\/p>\n
\u9875\u9762\u7ec4\u4ef6<\/h2>\n
\u6bcf\u4e00\u4e2aTaro<\/code>\u5e94\u7528\u90fd\u81f3\u5c11\u5305\u62ec\u4e00\u4e2a\u9875\u9762\u7ec4\u4ef6\uff0c\u9875\u9762\u7ec4\u4ef6\u53ef\u4ee5\u901a\u8fc7Taro<\/code>\u8def\u7531\u8fdb\u884c\u8df3\u8f6c\uff0c\u4e5f\u53ef\u4ee5\u8bbf\u95ee\u5c0f\u7a0b\u5e8f\u9875\u9762\u7684\u751f\u547d\u5468\u671f\uff0c\u6bcf\u4e00\u4e2a\u9875\u9762\u7ec4\u4ef6\u5fc5\u987b\u662f\u4e00\u4e2a.vue<\/code>\u6587\u4ef6\uff1a<\/p>\n
<template>\n  <view class="index">\n    <NumberDisplay \/>\n    <NumberSubmit \/>\n  <\/view>\n<\/template>\n\n<script>\nimport NumberDisplay from '..\/..\/components\/NumberDisplay.vue'\nimport NumberSubmit from '..\/..\/components\/NumberSubmit.vue'\n\nexport default {\n  name: 'Index',\n  components: {\n    NumberDisplay,\n    NumberSubmit\n  }\n}\n<\/script>\n\n<style>\n.index {\n  font-family: "Avenir", Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n<\/style><\/code><\/pre>\n
\u9875\u9762\u914d\u7f6e<\/h3>\n
\u548c\u5165\u53e3\u7ec4\u4ef6\u4e00\u6837\uff0c\u5bf9\u4e8e\u4e00\u4e2a\u9875\u9762\u6587\u4ef6(\u4f8b\u5982.\/pages\/index\/index.vue<\/code>)\u800c\u8a00\uff0c\u6211\u4eec\u53ef\u4ee5\u65b0\u589e\u4e00\u4e2a.\/pages\/index\/index.config.js<\/code>\u7684\u6587\u4ef6\u8fdb\u884c\u9875\u9762\u914d\u7f6e\uff0cindex.config.js<\/code>\u7684\u9ed8\u8ba4\u5bfc\u51fa\u5c31\u662f\u7684\u9875\u9762\u914d\u7f6e\uff0c\u6bcf\u4e00\u4e2a\u9875\u9762\u90fd\u62e5\u6709\u81ea\u5df1\u914d\u7f6econfig<\/code>\uff0c\u8fd9\u4e2a\u914d\u7f6e\u662f\u9488\u5bf9\u5f53\u524d\u9875\u9762\u914d\u7f6e\uff0c\u914d\u7f6e\u89c4\u8303\u57fa\u4e8e\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u9875\u9762\u914d\u7f6e\u8fdb\u884c\u5236\u5b9a\uff0c\u6240\u6709\u5e73\u53f0\u8fdb\u884c\u7edf\u4e00<\/p>\n
\u751f\u547d\u5468\u671f<\/h3>\n
onReady()<\/h4>\n
\u9875\u9762\u9996\u6b21\u6e32\u67d3\u5b8c\u6bd5\u65f6\u6267\u884c\uff0c\u6b64\u751f\u547d\u5468\u671f\u5728\u5c0f\u7a0b\u5e8f\u7aef\u5bf9\u5e94\u5c0f\u7a0b\u5e8f\u9875\u9762\u7684onReady<\/code>\u751f\u547d\u5468\u671f\u3002\u4ece\u6b64\u751f\u547d\u5468\u671f\u5f00\u59cb\u53ef\u4ee5\u4f7f\u7528createCanvasContext<\/code>\u6216createselectorquery<\/code>\u7b49 API \u8bbf\u95ee\u771f\u5b9e DOM\u3002<\/p>\n
\u5728\u53ef\u4ee5\u975e\u9875\u9762\u7ec4\u4ef6\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528Taro<\/code>\u5185\u7f6e\u7684 \u6d88\u606f\u673a\u5236<\/a> \u8bbf\u95ee\u9875\u9762\u7ec4\u4ef6\u7684onReady()<\/code>\u751f\u547d\u5468\u671f\uff1a<\/p>\n
<template>\n  <view id="only" \/>\n<\/template>\n<script>\n  import { eventCenter, getCurrentInstance } from '@tarojs\/taro'\n\n  export default {\n    mounted () {\n      eventCenter.once(getCurrentInstance().router.onReady, () => {\n        const query = Taro.createSelectorQuery()\n        query.select('#only').boundingClientRect()\n        query.exec(res => {\n          console.log(res, 'res')\n        })\n        console.log('onReady')\n      })\n    }\n  }\n<\/script><\/code><\/pre>\n
onLoad(options)<\/h4>\n
\u9875\u9762\u521b\u5efa\u65f6\u6267\u884c\uff0c\u6b64\u751f\u547d\u5468\u671f\u5728\u5c0f\u7a0b\u5e8f\u7aef\u5bf9\u5e94\u5c0f\u7a0b\u5e8f\u9875\u9762\u7684onLoad<\/code>\u751f\u547d\u5468\u671f\u3002\u6b64\u751f\u547d\u5468\u671f\u53ef\u4ee5\u8bbf\u95eegetCurrentInstance().router<\/code>\u3002<\/p>\n
created()<\/h4>\n
\u9875\u9762\u52a0\u8f7d\u65f6\u89e6\u53d1\uff0c\u4e00\u4e2a\u9875\u9762\u53ea\u4f1a\u8c03\u7528\u4e00\u6b21\uff0c\u6b64\u65f6\u9875\u9762 DOM \u5c1a\u672a\u51c6\u5907\u597d\uff0c\u8fd8\u4e0d\u80fd\u548c\u89c6\u56fe\u5c42\u8fdb\u884c\u4ea4\u4e92<\/p>\n
mounted()<\/h4>\n
\u9875\u9762\u521d\u6b21\u6e32\u67d3\u5b8c\u6210\u65f6\u89e6\u53d1\uff0c\u4e00\u4e2a\u9875\u9762\u53ea\u4f1a\u8c03\u7528\u4e00\u6b21\uff0c\u4ee3\u8868\u9875\u9762\u5df2\u7ecf\u51c6\u5907\u59a5\u5f53\uff0c\u53ef\u4ee5\u548c\u89c6\u56fe\u5c42\u8fdb\u884c\u4ea4\u4e92<\/p>\n
beforeUpdate()<\/h4>\n
\u9875\u9762\u5373\u5c06\u66f4\u65b0<\/p>\n
updated(prevProps, prevState)<\/h4>\n
\u9875\u9762\u66f4\u65b0\u5b8c\u6bd5<\/p>\n
beforeDestroy()<\/h4>\n
\u9875\u9762\u5378\u8f7d\u65f6\u89e6\u53d1\uff0c\u5982redirectTo<\/code>\u6216navigateBack<\/code>\u5230\u5176\u4ed6\u9875\u9762\u65f6<\/p>\n
onShow()<\/h4>\n
\u9875\u9762\u663e\u793a\/\u5207\u5165\u524d\u53f0\u65f6\u89e6\u53d1<\/p>\n
onHide()<\/h4>\n
\u9875\u9762\u9690\u85cf\/\u5207\u5165\u540e\u53f0\u65f6\u89e6\u53d1\uff0c \u5982navigateTo<\/code>\u6216\u5e95\u90e8tab<\/code>\u5207\u6362\u5230\u5176\u4ed6\u9875\u9762\uff0c\u5c0f\u7a0b\u5e8f\u5207\u5165\u540e\u53f0\u7b49<\/p>\n
\u5728\u4ee5\u4e0a\u6240\u6709\u7684\u751f\u547d\u5468\u671f\u65b9\u6cd5\u4e2d\uff0c\u90fd\u53ef\u4ee5\u901a\u8fc7getCurrentInstance().router<\/code>\u83b7\u53d6\u6253\u5f00\u5f53\u524d\u9875\u9762\u8def\u5f84\u4e2d\u7684\u53c2\u6570\u3002<\/p>\n
\u9875\u9762\u4e8b\u4ef6\u5904\u7406\u51fd\u6570<\/h3>\n
\u5728\u5c0f\u7a0b\u5e8f\u4e2d\uff0c\u9875\u9762\u8fd8\u6709\u5728\u4e00\u4e9b\u4e13\u5c5e\u7684\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c\u5982\u4e0b<\/p>\n
onPullDownRefresh()<\/h4>\n
\u76d1\u542c\u7528\u6237\u4e0b\u62c9\u5237\u65b0\u4e8b\u4ef6<\/p>\n