-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(vue3): 支持编译为原生自定义组件 * chore: sort imports
- Loading branch information
Showing
45 changed files
with
15,200 additions
and
2,032 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
miniapp/taro | ||
taro-project/dist | ||
**/node_modules | ||
.DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
## Demo - 把 Taro 项目编译为原生自定义组件 | ||
|
||
[详细文档](https://docs.taro.zone/docs/taro-in-miniapp#%E6%8A%8A-taro-%E7%BB%84%E4%BB%B6%E7%BC%96%E8%AF%91%E4%B8%BA%E5%8E%9F%E7%94%9F%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6) | ||
|
||
### 开发环境 | ||
|
||
推荐在 Taro 项目中进行开发调试,在生产环境下再在原生小程序中进行预览。 | ||
|
||
#### 1. 编译运行 | ||
|
||
```bash | ||
$ npm run dev | ||
``` | ||
|
||
#### 2. 预览 | ||
|
||
小程序开发者工具导入项目,项目路径请指向 `blended-taro-component-vue3/taro-project`。 | ||
|
||
### 生产环境 | ||
|
||
#### 编译运行 | ||
|
||
```bash | ||
$ npm run build | ||
``` | ||
|
||
#### 2. 预览 | ||
|
||
小程序开发者工具导入项目,项目路径请指向 `blended-taro-component-vue3/miniapp`。 | ||
|
||
### 介绍 | ||
|
||
本示例包括了以下特性: | ||
|
||
- 基本使用方法 | ||
- 给组件传递 props | ||
- 为组件添加自定义组件的配置,如:`virtualHost` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
// app.js | ||
App({ | ||
onLaunch() { | ||
// 展示本地存储能力 | ||
const logs = wx.getStorageSync('logs') || [] | ||
logs.unshift(Date.now()) | ||
wx.setStorageSync('logs', logs) | ||
|
||
// 登录 | ||
wx.login({ | ||
success: res => { | ||
// 发送 res.code 到后台换取 openId, sessionKey, unionId | ||
} | ||
}) | ||
// 获取用户信息 | ||
wx.getSetting({ | ||
success: res => { | ||
if (res.authSetting['scope.userInfo']) { | ||
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 | ||
wx.getUserInfo({ | ||
success: res => { | ||
// 可以将 res 发送给后台解码出 unionId | ||
this.globalData.userInfo = res.userInfo | ||
|
||
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 | ||
// 所以此处加入 callback 以防止这种情况 | ||
if (this.userInfoReadyCallback) { | ||
this.userInfoReadyCallback(res) | ||
} | ||
} | ||
}) | ||
} | ||
} | ||
}) | ||
}, | ||
|
||
globalData: { | ||
userInfo: null | ||
} | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
{ | ||
"pages": ["pages/index/index"], | ||
"window": { | ||
"backgroundTextStyle": "light", | ||
"navigationBarBackgroundColor": "#fff", | ||
"navigationBarTitleText": "Weixin", | ||
"navigationBarTextStyle": "black" | ||
}, | ||
"style": "v2", | ||
"sitemapLocation": "sitemap.json" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
/**app.wxss**/ | ||
.container { | ||
height: 100%; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: space-between; | ||
padding: 200rpx 0; | ||
box-sizing: border-box; | ||
} |
59 changes: 59 additions & 0 deletions
59
examples/blended-taro-component-vue3/miniapp/pages/index/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
// index.js | ||
// 获取应用实例 | ||
const app = getApp() | ||
|
||
Page({ | ||
data: { | ||
motto: 'Hello World', | ||
userInfo: {}, | ||
hasUserInfo: false, | ||
canIUse: wx.canIUse('button.open-type.getUserInfo'), | ||
pickerProps: { | ||
title: 'test', | ||
list: ['A', 'B', 'C'], | ||
onButtonClick () { | ||
console.log('on button click') | ||
} | ||
} | ||
}, | ||
// 事件处理函数 | ||
bindViewTap() { | ||
|
||
}, | ||
onLoad() { | ||
if (app.globalData.userInfo) { | ||
this.setData({ | ||
userInfo: app.globalData.userInfo, | ||
hasUserInfo: true | ||
}) | ||
} else if (this.data.canIUse) { | ||
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 | ||
// 所以此处加入 callback 以防止这种情况 | ||
app.userInfoReadyCallback = res => { | ||
this.setData({ | ||
userInfo: res.userInfo, | ||
hasUserInfo: true | ||
}) | ||
} | ||
} else { | ||
// 在没有 open-type=getUserInfo 版本的兼容处理 | ||
wx.getUserInfo({ | ||
success: res => { | ||
app.globalData.userInfo = res.userInfo | ||
this.setData({ | ||
userInfo: res.userInfo, | ||
hasUserInfo: true | ||
}) | ||
} | ||
}) | ||
} | ||
}, | ||
getUserInfo(e) { | ||
console.log(e) | ||
app.globalData.userInfo = e.detail.userInfo | ||
this.setData({ | ||
userInfo: e.detail.userInfo, | ||
hasUserInfo: true | ||
}) | ||
} | ||
}) |
6 changes: 6 additions & 0 deletions
6
examples/blended-taro-component-vue3/miniapp/pages/index/index.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"usingComponents": { | ||
"detail": "../../taro/pages/detail/index", | ||
"picker": "../../taro/components/picker/index" | ||
} | ||
} |
19 changes: 19 additions & 0 deletions
19
examples/blended-taro-component-vue3/miniapp/pages/index/index.wxml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<!--index.wxml--> | ||
<view class="container"> | ||
<view class="userinfo"> | ||
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> | ||
<block wx:else> | ||
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> | ||
<text class="userinfo-nickname">{{userInfo.nickName}}</text> | ||
</block> | ||
</view> | ||
<view class="usermotto"> | ||
<text class="user-motto">Detail</text> | ||
<detail></detail> | ||
</view> | ||
|
||
<view class="usermotto"> | ||
<text class="user-motto">Picker</text> | ||
<picker props="{{pickerProps}}"></picker> | ||
</view> | ||
</view> |
21 changes: 21 additions & 0 deletions
21
examples/blended-taro-component-vue3/miniapp/pages/index/index.wxss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
/**index.wxss**/ | ||
.userinfo { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
} | ||
|
||
.userinfo-avatar { | ||
width: 128rpx; | ||
height: 128rpx; | ||
margin: 20rpx; | ||
border-radius: 50%; | ||
} | ||
|
||
.userinfo-nickname { | ||
color: #aaa; | ||
} | ||
|
||
.usermotto { | ||
margin-top: 100px; | ||
} |
54 changes: 54 additions & 0 deletions
54
examples/blended-taro-component-vue3/miniapp/project.config.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
{ | ||
"description": "项目配置文件", | ||
"packOptions": { | ||
"ignore": [], | ||
"include": [] | ||
}, | ||
"setting": { | ||
"urlCheck": false, | ||
"es6": false, | ||
"enhance": false, | ||
"postcss": true, | ||
"preloadBackgroundData": false, | ||
"minified": true, | ||
"newFeature": false, | ||
"coverView": true, | ||
"nodeModules": false, | ||
"autoAudits": false, | ||
"showShadowRootInWxmlPanel": true, | ||
"scopeDataCheck": false, | ||
"uglifyFileName": false, | ||
"checkInvalidKey": true, | ||
"checkSiteMap": true, | ||
"uploadWithSourceMap": true, | ||
"compileHotReLoad": false, | ||
"lazyloadPlaceholderEnable": false, | ||
"useMultiFrameRuntime": true, | ||
"useApiHook": true, | ||
"useApiHostProcess": true, | ||
"babelSetting": { | ||
"ignore": [], | ||
"disablePlugins": [], | ||
"outputPath": "" | ||
}, | ||
"enableEngineNative": false, | ||
"useIsolateContext": false, | ||
"userConfirmedBundleSwitch": false, | ||
"packNpmManually": false, | ||
"packNpmRelationList": [], | ||
"minifyWXSS": true, | ||
"disableUseStrict": false, | ||
"showES6CompileOption": false, | ||
"useCompilerPlugins": false, | ||
"minifyWXML": true | ||
}, | ||
"compileType": "miniprogram", | ||
"libVersion": "2.14.4", | ||
"appid": "wxa9abf43f10a7bdb0", | ||
"projectname": "miniprogram-1", | ||
"condition": {}, | ||
"editorSetting": { | ||
"tabIndent": "insertSpaces", | ||
"tabSize": 2 | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", | ||
"rules": [ | ||
{ | ||
"action": "allow", | ||
"page": "*" | ||
} | ||
] | ||
} |
12 changes: 12 additions & 0 deletions
12
examples/blended-taro-component-vue3/taro-project/.editorconfig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
# http://editorconfig.org | ||
root = true | ||
|
||
[*] | ||
indent_style = space | ||
indent_size = 2 | ||
charset = utf-8 | ||
trim_trailing_whitespace = true | ||
insert_final_newline = true | ||
|
||
[*.md] | ||
trim_trailing_whitespace = false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
// ESLint 检查 .vue 文件需要单独配置编辑器: | ||
// https://eslint.vuejs.org/user-guide/#editor-integrations | ||
{ | ||
"extends": ["taro/vue3"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
dist/ | ||
deploy_versions/ | ||
.temp/ | ||
.rn_temp/ | ||
node_modules/ | ||
.DS_Store |
30 changes: 30 additions & 0 deletions
30
examples/blended-taro-component-vue3/taro-project/babel.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
// babel-preset-taro 更多选项和默认值: | ||
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md | ||
module.exports = { | ||
presets: [ | ||
['taro', { | ||
framework: 'vue3', | ||
ts: true | ||
}] | ||
], | ||
plugins: [ | ||
[ | ||
"import", | ||
{ | ||
"libraryName": "@nutui/nutui-taro", | ||
"libraryDirectory": "dist/packages/_es", | ||
// customName自定义兼容国际化使用 | ||
"customName": (name, file) => { | ||
if (name == 'Locale') { | ||
return '@nutui/nutui-taro/dist/packages/locale/lang'; | ||
} else { | ||
return `@nutui/nutui-taro/dist/packages/_es/${name}`; | ||
} | ||
}, | ||
"style": (name, file) => name.toLowerCase().replace('_es/', '') + '/index.scss', | ||
"camel2DashComponentName": false | ||
}, | ||
'nutui3-taro' | ||
] | ||
] | ||
} |
9 changes: 9 additions & 0 deletions
9
examples/blended-taro-component-vue3/taro-project/config/dev.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
module.exports = { | ||
env: { | ||
NODE_ENV: '"development"' | ||
}, | ||
defineConstants: { | ||
}, | ||
mini: {}, | ||
h5: {} | ||
} |
Oops, something went wrong.