tinajs / tina Goto Github PK

View Code? Open in Web Editor NEW

1.3K 51.0 131.0 843 KB

:dancer: 一款轻巧的渐进式微信小程序框架

Home Page: https://tina.js.org

License: Apache License 2.0

JavaScript 100.00%

tina mina wechat-mini-program wechat weixin framework weapp wxapp wxml wxss

tina's Introduction

Tina.js

一款轻巧的渐进式微信小程序框架

特性

🐝 轻盈小巧

核心框架打包后仅。
🙋 极易上手

保留 MINA (微信小程序官方框架) 的大部分 API 设计；无论你有无小程序开发经验，都可以轻松过渡上手。
📈 渐进增强

我们已经为你准备好了状态管理器 (比如 Redux)、Immutable.js、路由增强等扩展，当然你也可以自己编写一个新的插件。

NPM 与单文件组件

结合我们为你准备的 mina-webpack，还能够为你的小程序项目带来：

🍢 Mina 单文件组件 / 页面
📦 NPM（没错！除了一般的包，你还可以分享或下载独立的 Mina 组件）
🔮 以及 Webpack 附带的其他能力，如 Babel、PostCSS、代码压缩等功能。

一个简单的例子

浏览更多示例

浏览更多使用 Tina.js 的示例 🔰

文档

如果你已经熟悉传统的小程序开发，那么上手 tina 将会非常简单。

接下来，请前往 📖 tina.js.org 查阅更详尽的指南。

Showcase

小程序码	项目
	Hacker News 热点 🔥 https://github.com/tinajs/tina-hackernews
	快资讯 @lizheming
	即刻App @ruguoapp
	选个电影 @leadream
	小鹿选房 fanggeek.com
	魔性壁纸 😀 neobaran.com
	和教育语智通教师版
	库音 COOLVOX coolvox.com
	CHA蛋 chaotag.com

你也已经在使用 Tina.js 了吗？请在这里告诉我们 💪。

License

Apache-2.0 © yelo, 2017 - present

tina's People

Contributors

Stargazers

Watchers

Forkers

gitter-badger joooye34 mooniitt erickwang heizol forging2012 fnet123 shuixingzai hiekay changzengjing matrixempire charm-j fossabot caomusag solarkong baleen-y cpxiao constantine008 mjj137993394 cozyman vkveeroute alonbee ttga canmengfly itxcx oceanliang peakpei amourz duke-lv zhangyilan003 stsaf kathydong1 cheche723 mrzeng wangshuonpu qianmogg mvpleung forked-repositories taoste ssiagu cosformula netputer iftechio loveformat liu279 jerrycjr leadream qianduanheiye allenleex twtcer zhanxiaodong plocklsh graydonli zhyzhy transprent luckapple witsoft001 scbzld jangocheng choecode xinpingjun ii0 one-mo brolly0204 yikaj shawngee423 lhdarker mrbone timelovers strange-fish repe123 budding888 catmi666 leegle taki185 peirancao luorijin maiduoduo ironxu callmesoul xflihaibo torns neilsons alinjiajun smartree enginecode pymonar young505 kevinluuu luobogor weizai118 tianya3796 zhouyun-zoe fyscx wangminjun guojiayinuoqianjin xbigmouth sounddoor peiyaoyao icorecool

tina's Issues

大大，我想问问还有其他使用tina框架的小程序吗

最近在看各种小程序框架，我倾向于使用微信原生组件，在此基础上扩展我们所需要的所以看上了两个框架，一个是wxpage 腾讯视频推的框架，还有一个就是大大你的框架了，wxpage给我的感觉就是更轻，不过大大的框架带有一些单文件呀之类的，对开发更方便，只是看大大的官网，就看到一个现成的使用tina框架的小程序案例，想问问大大还有其他的使用tina框架的小程序，我想体验体验

传参并返回上一页时数据没变化

上一页定义的数据：

data: {
    test: null
}

当前页设置上一页数据：

      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2];
      prevPage.setData({
          test: 'some test',
      })

上一页如果在wxml里有用到 {{ test }} ，数据确实发生了变化，但是当返回上一页时，console.log(this.data.test) 结果却是默认值 null 没有变化

用原来的 Page({}) 打印data数据是有变化的，用了 Page.define({}) 数据就为null了

bug: component 组件中定义的 data 数据对象被共享

例子

在page页面中引用了 2 次 form 组件，导致 formData 对象数据公用，当输入一个框时，第二个文本框值自动同步，surname 参数完好！

我在原生小程序中不会出现该问题。

// page
<template>
  <view>
    <form></form>
    <form></form>
</view>
</template>

// form component
<template>
  <view class="form-validate">
    <view class="form-item">
      <view class="label">
        <text class="red">*</text>姓
      </view>
      <view class="box">
        <input type="text" maxlength="50" placeholder="请输入汉字姓" value="{{ surname }}" bindinput="surnameInputChange" />
      </view>
       <view class="box">
        <input type="text" maxlength="50" placeholder="请输入汉字姓" value="{{ formData.surname }}" bindinput="surnameformDataInputChange" />
      </view>
    </view>
  </view>
</template>

<script>
import { Component } from '@tinajs/tina'

Component.define({
  data: {
    formData: {
      surname: ''
    },
    surname: '',
    __deep__: true // 1
  },
 // 2
  // data() {
  //   return {
  //     formData: {
  //       surname: ''
  //     },
  //     surname: ''
  //   }
  // },
methods: {
    surnameformDataInputChange({ detail: { value } }) {
      this.data.formData['surname'] = value
      this.setData({
        formData: this.data.formData
      })
    },
    surnameInputChange({ detail: { value } }) {
      this.setData({
        surname: value
      })
    },
  }
});
</script>

目前解决方案

data 中加个 __deep__: true 来标示进行对 对象 深拷贝解决。

  function SigmundData(plain) {
    var _this = this;

    classCallCheck(this, SigmundData);

    forOwn(plain, function (value, key) {
      _this[key] = value;
+     if (plain && plain.__deep__) {
+       _this[key] = deepClone1(value);
+     }
    });

    Object.defineProperty(this, '__signatures', {
      enumerable: false,
      writable: true
    });

    this.sign();
  }

如果 data 可以定义是个函数来解决那就更好 🤔

请问tina是否不支持云开发？

project.config.json 可以自定义配置吗？
src目录下添加新文件不会打包到dist？

tina 能够支持多页配置？

有这样一个需求：

同时要开发 & 维护两个小程序，期望将它们放在一个项目中，开发过程同多页面文件开发一样。
不知该如何配置，作者能够提供一下解决思路

谢谢

app.js 中由插件引入都方法没有 polyfill

我自定义的插件中有用到 async/await 方法，但是看最后编译进 app.js 后好像没有 polyfill，导致在 iOS 端无法正常运行。

Component 组件不支持 pageLifetimes

我现在急需使用这个功能 😭

我看了源码中 /src/core/layers/component.js 是没有配置这个方法的吗

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

在set data 的时候不能trigger wxml 层的 class 中的变量更新

嗨你好！感谢开发这个框架目前为止非常好用但是遇到一个问题无法解决

我尝试使用 Ripples.wxss 添加animation 一个常用的方法使用 setData 来控制 animation 比如通过改变 data 中的 bounceShow 就可以给以下这个view 添加 bounce 动画
<view class="ripple {{bounceShow ? bounce:''}}">bounce</view>
但是用了 tina.js 之后无法看到在 wxml 中的 data的更新在这个例子中 bounceShow 一直不会被改变能提供一些debug的思路吗？感谢🙏

page 怎么使用 selectComponent

this.selectComponent("#image-cropper");
this.selectComponent is not a function;

Page缺少getTabBar()

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

import { Page } from "tina.min.js";

Page.define({
  onShow() {
    this.getTabBar().setData({ xxxx }) // this.getTabBar is not a function
  }
})

与其他同类框架相比，有什么优势或亮点？

看了文档感觉作者还是蛮用心的。
所以想了解下，与其他同类框架相比，有什么优势或亮点？
比如wepy、mpvue之类。

组件下找不到全局插件

组件里找不到全局安装的插件例如
this.$route //undefined

有比较好的支持sass的方案吗？

能否出个简短的视频教程了

如题

能支持原生的wxs吗

请问能不能支持把config放到script标签内部？

类似 wepy 那样。。。
提示这个 issues 的主要原因和 #55 是一样的，webstorm折腾了半天还是没法格式化标签内的代码，自己又不会写插件。。。如果能把 config 放到 script 内，作为一种可选的形式，那就真的太感谢了

eslint 自动格式化问题

如下图 vutur 无法识别tina语法，如何修复呢？

webpack配置怎么加上stylus-loader？

因为当前目录结构不大确定。
所以加上stylus-loader，可以使用~路径
这样样式文件与样式文件的引用就变成绝对路径，就算结构变换也不用去每个文件改引用路径。

但试了很久都报错。
请问怎么引入stylus-loader？

tinajs 支持引入原生代码的 Components 吗？

正在使用 tinajs，请问 tinajs 支持引入原生代码的 components 吗？如果支持，该怎么引入呢？

例如，我想引入 trtc-room components

引入图片后报错

Module build failed (from ../node_modules/@tinajs/mina-loader/lib/index.js):
ModuleBuildError: Module build failed (from ../node_modules/@tinajs/wxml-loader/lib/index.js):
evalmachine.:1
export default webpack_public_path + "assets/driver.png";

引入图片报错了
<image src="../../images/driver.png" />

这个怎么解决啊

有没有模板增强计划，比如双向绑定

目前有js和style的增强，那么是否考虑下template的增强？比如非常实用的双向绑定。例如wx:model="someValue"=value="{{somevalue}}" bind:input="onInput"这样的辅助写法。

parseInt 和parseFloat都用不了的？

为什么parseInt 和parseFloat都用不了的？

thirdScriptError 
 sdk uncaught third Error 
 $parseFloat is not a function 
 TypeError: $parseFloat is not a function
    at Object.300 (http://127.0.0.1:14521/appservice/pages/notice/detail.js:205:22)
    at __webpack_require__ (http://127.0.0.1:14521/appservice/runtime.js:79:30)
    at Object.299 (http://127.0.0.1:14521/appservice/pages/notice/detail.js:192:19)
    at __webpack_require__ (http://127.0.0.1:14521/appservice/runtime.js:79:30)
    at Object.298 (http://127.0.0.1:14521/appservice/pages/notice/detail.js:182:1)
    at __webpack_require__ (http://127.0.0.1:14521/appservice/runtime.js:79:30)
    at Object.297 (http://127.0.0.1:14521/appservice/pages/notice/detail.js:175:18)
    at __webpack_require__ (http://127.0.0.1:14521/appservice/runtime.js:79:30)
    at Module.266 (http://127.0.0.1:14521/appservice/pages/notice/detail.js:15:100)
    at __webpack_require__ (http://127.0.0.1:14521/appservice/runtime.js:79:30)

当文件数超过一定数量时遭遇 npm start 失败

➜  yaodd-wxlite git:(master) ✗ npm run start

> [email protected] prestart /Users/zhuozhongcao/Desktop/Projects/yaodd/yaodd-wxlite
> run-s clean


> [email protected] clean /Users/zhuozhongcao/Desktop/Projects/yaodd/yaodd-wxlite
> rimraf "./dist/!(app.json|project.config.json)**"


> [email protected] start /Users/zhuozhongcao/Desktop/Projects/yaodd/yaodd-wxlite
> webpack -w


Webpack is watching the files…

➜  yaodd-wxlite git:(master) ✗

运行npm run start的时候会自动结束

但是只要把app.mina里面pages随便删掉两行就一切正常了

项目中自己封装了插件，如果在 App() 中调用插件方法呢？

现在 App() 貌似不在 tina 中，如何在 App() 调用封装的插件方法呢？

插件模式下 mixin 失效

在开发小程序插件中，使用全局 mixin 方法失效

plugin.mina
pages
- index.main

plugin.mina

<config>
{
  "pages":{
    "index": "pages/index.mina",
  },
  "main": "plugin.js"
}
</config>

<script>
import { Page, Component } from '@tinajs/tina'

const isx = /iphone10|iphone11|iphone x/i.test(wx.getSystemInfoSync().model)
const data = { isx }

Page.mixin({ data })
Component.mixin({ data })
</script>

{
  "navigationBarTitleText":"书单列表",
  "usingComponents": {
    "book-list":"../../components/library/book-list/book-list.mina",
    "scroller-pagination":"../../components/scroller-pagination/scroller-pagination.mina",
  }
}

{
  "navigationBarTitleText":"书单列表",
  "usingComponents": {
    "book-list":"@/components/library/book-list/book-list.mina",
    "scroller-pagination":"~@/components/scroller-pagination/scroller-pagination.mina",
  }
}

依赖包中的图片资源不能被编译

背景

引入三方小程序原生UI组件

yarn add lin-ui

三方组件应用

使用 lin-ui 提供的组件, lin-ui

<config>
{
  "component": true,
  "usingComponents": {
    "tab-bar": "./tab-bar.mina",
    "l-capsule-bar": "~lin-ui/dist/capsule-bar/index"
  }
}
</config>

<template>
  <view>
    <l-capsule-bar bg-color="#25798a" home-page="pages/home/index" title="title">
      <slot></slot>
    </l-capsule-bar>
    <tab-bar />
  </view>
</template>

<script>
import { Component } from '@tinajs/tina'
Component.define({
})
</script>

问题

渲染视图中, 组件 l-capsule-bar 引用的本地图片, 为正常编译

临时解决

cp -rf node_modules/lin-ui/dist/capsule-bar/icons ./dist/_/_node_modules_/lin-ui/dist/capsule-bar/

期望

期望 tinajs 可以自动打包三方组件中的静态资源.

npm ERR! 404 Not Found: sao-mina@latest

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tmg2017/.npm/_logs/2018-11-13T08_33_20_683Z-debug.log
/usr/local/lib/node_modules/sao/lib/installPackages.js:89
        throw new SAOError(`Failed to install ${packageName} in ${cwd}`)
        ^

Error: Failed to install sao-mina@latest in /Users/tmg2017/.sao/V1/packages/4bbaad60
    at ChildProcess.ps.on.code (/usr/local/lib/node_modules/sao/lib/installPackages.js:89:15)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Socket.stream.socket.on (internal/child_process.js:346:11)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at Pipe._handle.close [as _onclose] (net.js:557:12)

import { Page } from "tina.min.js";

Page.define({
  onLoad() {
    const eventChannel = this.getOpenerEventChannel() // is not a function
    console.log(eventChannel)
  }
})

Page({
  onLoad() {
    const eventChannel = this.getOpenerEventChannel()
    console.log(eventChannel) // {listener: {…}, emit: ƒ, on: ƒ, once: ƒ, off: ƒ, …}
  }
})

import { Page } from "tina.min.js";

Page.define({
  onLoad() {
    const eventChannel = this.$source.getOpenerEventChannel()
    console.log(eventChannel) // {listener: {…}, emit: ƒ, on: ƒ, once: ƒ, off: ƒ, …}
  }
})

组件没法使用新的lifetimes生命周期字段

定义生命周期方法
生命周期方法可以直接定义在 Component 构造器的第一级参数中。

自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

代码示例：

Component({
  lifetimes: {
    attached() {
      // 在组件实例进入页面节点树时执行
    },
    detached() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached() {
    // 在组件实例进入页面节点树时执行
  },
  detached() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

tina 的 component 支持旧的，不支持新的

Page 中不能支持 onTabItemTap 生命周期函数

在最新的开发者工具里测试发现没有效果。使用官方示例代码却可以。

项目引入 echarts-for-weixin 库，webpack 编译报错

TypeError: Class constructor WebpackError cannot be invoked without 'new'。

该库不需要使用 new 来创建，应该如何解决呢。

// https://github.com/ecomfe/echarts-for-weixin/blob/master/pages/bar/index.js

chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });

原生app的全局组件配置失败

小程序自己出了个全局组件，早app配置文件配置就好了。
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#usingComponents

但是不知道怎么写，都不生效，跑步起来

"usingComponents":{
    "is-null": "./components/is-null/is-null.mina"
  },

tinajs 的全局组件要怎么写？
@imyelo