index.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <view class="defaultStyles">
  3. </view>
  4. </template>
  5. <script lang="uts">
  6. /**
  7. * 引用 iOS 系统库
  8. * [可选实现,按需引入]
  9. */
  10. import {
  11. UIButton,
  12. UIControl
  13. } from "UIKit"
  14. /**
  15. * 引入三方库
  16. * [可选实现,按需引入]
  17. *
  18. * 在 iOS 平台引入三方库有以下两种方式:
  19. * 1、通过引入三方库framework 或者.a 等方式,需要将 .framework 放到 ./Frameworks 目录下,将.a 放到 ./Libs 目录下。更多信息[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#ios-平台原生配置)
  20. * 2、通过 cocoaPods 方式引入,将要引入的 pod 信息配置到 config.json 文件下的 dependencies-pods 字段下。详细配置方式[详见](https://uniapp.dcloud.net.cn/plugin/uts-ios-cocoapods.html)
  21. *
  22. * 在通过上述任意方式依赖三方库后,使用时需要在文件中 import:
  23. * 示例:import { LottieAnimationView, LottieAnimation, LottieLoopMode } from 'Lottie'
  24. */
  25. /**
  26. * UTSiOS、UTSComponent 为平台内置对象,不需要 import 可直接调用其API,[详见](https://uniapp.dcloud.net.cn/uts/utsios.html)
  27. */
  28. import { UTSComponent } from "DCloudUTSFoundation"
  29. //原生提供以下属性或方法的实现
  30. export default {
  31. data() {
  32. return {
  33. };
  34. },
  35. /**
  36. * 组件名称,也就是开发者使用的标签
  37. */
  38. name: "uts-button",
  39. /**
  40. * 组件涉及的事件声明,只有声明过的事件,才能被正常发送
  41. */
  42. emits: ['buttonclick'],
  43. /**
  44. * 属性声明,组件的使用者会传递这些属性值到组件
  45. */
  46. props: {
  47. /**
  48. * 字符串类型 属性:buttontext 需要设置默认值
  49. */
  50. "buttontext": {
  51. type: String,
  52. default: "点击触发"
  53. }
  54. },
  55. /**
  56. * 组件内部变量声明
  57. */
  58. /**
  59. * 属性变化监听器实现
  60. */
  61. watch: {
  62. "buttontext": {
  63. /**
  64. * 这里监听属性变化,并进行组件内部更新
  65. */
  66. handler(newValue : String, oldValue : String) {
  67. this.$el.setTitle(newValue, for = UIControl.State.normal)
  68. },
  69. /**
  70. * 创建时是否通过此方法更新属性,默认值为false
  71. */
  72. immediate: false
  73. },
  74. },
  75. /**
  76. * 规则:如果没有配置expose,则methods中的方法均对外暴露,如果配置了expose,则以expose的配置为准向外暴露
  77. * ['publicMethod'] 含义为:只有 `publicMethod` 在实例上可用
  78. */
  79. expose: ['doSomething'],
  80. methods: {
  81. /**
  82. * 对外公开的组件方法
  83. * 在uni-app中调用组件方法,可以通过指定ref的方式,例如指定uts-button 标签的ref 为 ’button‘, 调用时使用:this.$refs["button"].doSomething('message');
  84. */
  85. doSomething(paramA : string) {
  86. // 这是组件的自定义方法
  87. console.log(paramA, 'this is in uts-button component')
  88. },
  89. /**
  90. * 内部使用的组件方法
  91. */
  92. },
  93. /**
  94. * 组件被创建,组件第一个生命周期,
  95. * 在内存中被占用的时候被调用,开发者可以在这里执行一些需要提前执行的初始化逻辑
  96. * [可选实现]
  97. */
  98. created() {
  99. },
  100. /**
  101. * 对应平台的view载体即将被创建,对应前端beforeMount
  102. * [可选实现]
  103. */
  104. NVBeforeLoad() {
  105. },
  106. /**
  107. * 创建原生View,必须定义返回值类型
  108. * 开发者需要重点实现这个函数,声明原生组件被创建出来的过程,以及最终生成的原生组件类型
  109. * [必须实现]
  110. */
  111. NVLoad() : UIButton {
  112. //必须实现
  113. buttonClickListsner = new ButtonClickListsner(this)
  114. let button = new UIButton()
  115. button.setTitle(this.buttontext, for = UIControl.State.normal)
  116. // 在 swift target-action 对应的方法需要以OC的方式来调用,那么OC语言中用Selector来表示一个方法的名称(又称方法选择器),创建一个Selector可以使用 Selector("functionName") 的方式。
  117. const method = Selector("buttonClickAction")
  118. if (buttonClickListsner != null) {
  119. button.addTarget(buttonClickListsner!, action = method, for = UIControl.Event.touchUpInside)
  120. }
  121. return button
  122. },
  123. /**
  124. * 原生View已创建
  125. * [可选实现]
  126. */
  127. NVLoaded() {
  128. /**
  129. * 通过 this.$el 来获取原生控件。
  130. */
  131. this.$el.setTitle(this.buttontext, for = UIControl.State.normal)
  132. },
  133. /**
  134. * 原生View布局完成
  135. * [可选实现]
  136. */
  137. NVLayouted() {
  138. },
  139. /**
  140. * 原生View将释放
  141. * [可选实现]
  142. */
  143. NVBeforeUnload() { },
  144. /**
  145. * 原生View已释放,这里可以做释放View之后的操作
  146. * [可选实现]
  147. */
  148. NVUnloaded() {
  149. },
  150. /**
  151. * 组件销毁
  152. * [可选实现]
  153. */
  154. unmounted() { }
  155. /**
  156. * 更多组件开发的信息详见:https://uniapp.dcloud.net.cn/plugin/uts-component.html
  157. */
  158. }
  159. /**
  160. * 定义按钮点击后触发回调的类
  161. * [可选实现]
  162. */
  163. class ButtonClickListsner {
  164. /**
  165. * 如果需要在回调类或者代理类中对组件进行操作,比如调用组件方法,发送事件等,需要在该类中持有组件对应的原生类的对象。
  166. * 组件原生类的基类为 UTSComponent,该类是一个泛型类,需要接收一个类型变量,该类型变量就是原生组件的类型。
  167. */
  168. private component : UTSComponent<UIButton>
  169. constructor(component : UTSComponent<UIButton>) {
  170. this.component = component
  171. super.init()
  172. }
  173. /**
  174. * 按钮点击回调方法
  175. * 在 swift 中,所有target-action (例如按钮的点击事件,NotificationCenter 的通知事件等)对应的 action 函数前面都要使用 @objc 进行标记。
  176. * [可选实现]
  177. */
  178. @objc buttonClickAction() {
  179. console.log("按钮被点击")
  180. // 发送事件
  181. this.component.__$$emit("buttonclick");
  182. }
  183. }
  184. /**
  185. * 定义回调类或者代理类的实例
  186. * [可选实现]
  187. */
  188. let buttonClickListsner : ButtonClickListsner | null = null
  189. </script>
  190. <style>
  191. </style>