winggao / mpvue-ts-demo Goto Github PK

View Code? Open in Web Editor NEW

124.0 4.0 33.0 880 KB

A Mpvue demo project with TypeScript. Mpvue搭配TypeScript也是妥妥的。

JavaScript 68.29% HTML 0.52% Vue 10.13% TypeScript 20.87% CSS 0.19%

mp mpvue ts typescript wxmp

mpvue-ts-demo's Introduction

mpvue Typescript demo

A mpvue project with Typescript

已支持mpvue 2.0 （微信小程序、百度智能小程序、头条小程序、支付宝小程序）

1.x版本的请前往v1分支

Build Setup

# install dependencies
yarn

# serve with hot reload at localhost:7100
yarn run dev

# build for production with minification
yarn run build

# build for production and view the bundle analyzer report
yarn run build --report

mpvue

mpvue-ts-demo's People

Contributors

Stargazers

Watchers

mpvue-ts-demo's Issues

将dist项目放到微信小程序开发工具编译出错

counter.ts 里面怎么不能使用typescript 类型定义

counter.ts 比如在第7行加上
let s:string

就不能编译了

pages 下面的main.js 可以也使用main.ts吗？

pages 下面的main.js 可以也使用main.ts吗？
如何配置了

Cannot read property 'template' of undefined

上周我直接clone下来执行npm run dev完全没有问题，只有执行npm run build时有问题。
这周再来就抛异常了。

H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\mpvue-loader\lib\mp-compiler\util.js:19
  const filePath = `/${resolveSrc(context, file)}.${fileExt.template}`
                                                            ^
TypeError: Cannot read property 'template' of undefined
    at getCompInfo (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\mpvue-loader\lib\mp-compiler\util.js:19:61)
    at createPageMPML (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\mpvue-loader\lib\mp-compiler\index.js:41:30)
    at resolve (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\mpvue-loader\lib\mp-compiler\index.js:196:9)
    at onResolve (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\enhanced-resolve\lib\Resolver.js:70:11)
    at innerCallback (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\enhanced-resolve\lib\Resolver.js:130:22)
    at callbackWrapper (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\enhanced-resolve\lib\createInnerCallback.js:10:21)
    at H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\tapable\lib\Tapable.js:347:15
    at H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:39:22
    at callbackWrapper (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\enhanced-resolve\lib\createInnerCallback.js:10:21)
    at innerCallback (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\enhanced-resolve\lib\Resolver.js:130:22)
    at callbackWrapper (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\enhanced-resolve\lib\createInnerCallback.js:10:21)
    at H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\tapable\lib\Tapable.js:347:15
    at innerCallback (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\enhanced-resolve\lib\Resolver.js:130:22)
    at callbackWrapper (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\enhanced-resolve\lib\createInnerCallback.js:10:21)
    at H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\tapable\lib\Tapable.js:347:15
    at resolver.doResolve.createInnerCallback (H:\okou\versionControl\git\mpvue-ts-demo2\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:41:24)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `cross-env node build/dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

mac上报错

ERROR Failed to compile with 7 errors

Module build failed: Error: No ESLint configuration found.

module "common/manifest.js" is not defined

删除demo, 重新下载，再解压
npm i
npm run dev
后以下错误：
VM277:1 thirdScriptError
sdk uncaught third Error
module "common/manifest.js" is not defined
Error: module "common/manifest.js" is not defined
at require (http://127.0.0.1:61404/appservice/__dev__/WAService.js:23:13423)
at http://127.0.0.1:61404/appservice/__dev__/WAService.js:23:13171
at http://127.0.0.1:61404/appservice/pages/index/main.js:3:1
at require (http://127.0.0.1:61404/appservice/__dev__/WAService.js:23:13564)
at :6:7
at HTMLScriptElement.scriptLoaded (http://127.0.0.1:61404/appservice/appservice?t=1539488179497:1190:23)

App 必须设置 mpType 为 'app'

否则无法获取场景值，也不能触发 onLaunch 等 app 相关的生命周期函数。

出现脚本错误或者未正确调用 Page()

你好，请问一下，为什么我通过<script lang="ts" src="./XXXXX.ts"></script> 这种方式引入 ts 文件之后会导致整个小程序编译完成之后无法运行呢，在控制台会有错误提示：出现脚本错误或者未正确调用 Page()。

感谢！能否说明一下需要做哪些更改？

感谢您提供的Typescript项目！
我想按照您提供的例子将一个刚生成的mpvue项目加入typescript支持，整个过程很不顺利……
能否大概说一下您在加入ts支持的时候做了哪些事情？我看到的有：

在.vue 的<script> 里面加上lang="ts"
在view-loader.conf.js里面加入ts: [... 部分
在webpack.base.conf.js里面加入test: /.tsx?$/, 部分
加入vue-shim.d.ts
加入tsconfig.json
package.json里面加入typescript

但是现在我尝试把一个page变成ts的page，结果是dist/目录里面没有这个page了...
.ts文件里面也对Component和Vue报错

package.json为什要依赖vue包

是要支持web端么？还是typescript需要？

启动报错

Error: Cannot find module 'E:\mpvue-ts-demo$NODE_DEBUG_OPTION'

how to use vuex in Typescript project

use vuex-class ?

package.json中依赖版本过旧

目前这个模板里面webpack版本很老，mpvue目前也更新到了2.0
请问这个模板可以更新下依赖吗？
自己太菜，根据模板升级出现了好多好多奇奇怪怪的问题，
请作者大大更新一下到最新版本好么？

mpType注入问题

基于这个项目把之前的mpvue项目整体移植到typescript，基本过程很顺利，唯一有一个地方：

mpType怎么注入？

我看到这个demo里面两个地方做了处理：
在最外面的main.ts
https://github.com/WingGao/mpvue-ts-demo/blob/dev/src/main.ts

interface IMpVue extends VueConstructor {
  mpType: string
}

// ...Other code...

// 在这个地方引入是为了registerHooks先执行
const MyApp = require('./App.vue').default as IMpVue

和app.ts
https://github.com/WingGao/mpvue-ts-demo/blob/dev/src/app.ts

// 必须使用装饰器的方式来指定components
@Component({
  mpType: 'app', // mpvue特定
}as any)
class App extends Vue {

我理解main.ts应该是之前的尝试失败了忘了删掉?
有用的是app.ts里面的这个，如果没有的话app的微信事件onLaunch啥的都没有

但是我发现这样的副作用是这样的：
如果在Page里面做同样的事情：

@Component({
  components: { HelloWorld },
  mpType: 'page'
} as any)
export default class Page extends Vue {

结局是自定义组件（HelloWorld）没有注册上！页面上渲染不出来

问题出在 as any 上，比如这样也是不行的：

@Component({
  components: { HelloWorld }
} as any)
export default class Page extends Vue {

但是如果没有as any的话（可能你也试过）ts编译不过……

目前问题貌似不是很大，因为看了mpvue的代码如果没有定义mpType的话默认是‘page’
但是正确的解法是什么呢？比如还有一个mpType是‘component’ 到时候就麻烦了……

（写了一个多星期的JS完全崩溃了，没有compiler写出来全是runtime error，前端的大佬们都是什么样的存在……）

package.json会更新吗

main.ts 引入 less 问题

import '@/weui/weui.css'
import '@/weui/weui_theme.less'
// 引入 less 文件报错
To install it, you can run: npm install --save @/weui/weui_theme.less

export default class Index extends VueClass dada 数据可以继承 function 方法不能继承

export default class VueClass extends Vue {
  public ver: number = 123

  public testFun (): any {
    console.log('testFun', 123456)
  }

  public onShareAppMessage (options?: any): any {
    // let _this = this
    let shareObj = {
      title: '',
      path: '', 
      imgUrl: '', 
      success: function (res: any) {
        // 转发成功之后的回调
        if (res.errMsg === 'shareAppMessage:ok') {
        }
      },
      fail: function (res: any) {
        // 转发失败之后的回调
        // 用户取消转发
        if (res.errMsg === 'shareAppMessage:fail cancel') {
        // 转发失败，其中 detail message 为详细失败信息
        } else if (res.errMsg === 'shareAppMessage:fail') {
        }
      }
    }
    return shareObj
  }
}

// 分享 功能无效 this.testFun() 报错 is not a function
export default class Index extends VueClass {
  AppUrls = AppUrls

  onShow() { // 小程序 hook
    // this.testFun()
    debug('onShow')
  }

  mounted() { // vue hook
    debug('mounted')
  }
}

<script lang="ts">，不引用src，直接在script里编写TS代码时，props无法被渲染

./src/components/card.vue 中有一段代码是

<script>
export default {
  props: ["text"]
};
</script>

如果第一句改成 <script lang="ts"> 那么父组件传给 Card 组件的 text 就不会被渲染了

不能使用components

代码如下：

结果如下：

组件对应的生命周期都触发了，但是在Wxml节点里不渲染

请问会是什么原因？

项目启动不了，都是ts的校验错误

克隆下来项目，然后安装完依赖，执行 npm run dev，启动不了，报的都是ts的校验错误，请问要如何才能让项目跑起来

Number.parseInt使用导致项目编译报错

Number.parseInt使用导致项目编译报错，up主这是为啥呢