nativescript

[uniquejava]

搭建环境

在app store中搜索nativescript下载它的playground和preview两个app. 然后在 https://play.nativescript.org 写界面, 扫码运行.

得到原生组件的引用

见https://github.com/nativescript-vue/nativescript-vue/issues/205

<ListView ref="listView" for="item in listOfItems" @itemTap="onItemTap">

this.$refs.listView.$el.nativeView.refresh();

Explanation:

• this.$refs.list - access to the "DOM" element that you tagged with ref="listView"
• $el - because the above is actually a Vue component internally, we have to access the <native-list-view> element, $el does this.
• nativeView - is the NativeScript view that is described in the linked docs.

一定不要在template中使用this.

<!-- Buggy -->
<Label v-show="$index === 0" :text="this.useWatson ? 'watson' : 'local'"></Label>

<!-- Correct -->
<Label v-show="$index === 0" :text="useWatson ? 'watson' : 'local'"></Label>

Blog

styling css类名不区分大小写.

theme

Showing an Activity Indicator During Processing in NativeScript Apps

Building a Simple Progressbar for your NativeScript App

使用feather icon

icon button icon fonts

在iconmoon网站上导入feathericon字库, generate > download 将生成的icomoon.ttf放到项目的app/fonts目录下. 定义样式

.icon {
   font-family: 'icomoon';
   font-size: 48;
}
.btn-connect {
    margin-bottom: 15;
    width: 180;
    height: 180;
    border-radius: 100%;
    border-width: 1;
    border-color: #FFFFFF;
    font-family: 'icomoon';
    font-size: 64;
}

使用

<Button class="btn-connect" :text="String.fromCharCode(0xe9b5)" />
<Label class="icon"  :text="String.fromCharCode(0xe930)" />

[uniquejava]

在{N}里使用vuex-persistedstate插件

用户在手机app中的设定保存在vuex store中, 当用户退出app时, 设定就丢失了, 需要把用户的设置保存到手机里边.在web中使用vuex时可以使用这个插件https://github.com/robinvdvleuten/vuex-persistedstate

想在nativescript中也使用这个插件(只要重写它的storage属性即可, 但是一直报下面这个错误

file:///app/app.js:1:150847: JS ERROR Error: Invalid storage instance given

查看了vuex-persistedstate的源码, 定位到是canWriteStorage抛出来的, 原因是{N}/application-settings的中针对number, boolean, string分别对应了三个不同的方法, 于是setString('@@', 1)报出了数字1的is not string的错误.

  function canWriteStorage(storage) {
    try {
      storage.setItem('@@', 1);
      storage.removeItem('@@');
      return true;
    } catch (e) {}

    return false;
  }

修改store/index.js的代码如下(根据value的类型调用不同的setXxx方法, 问题解决)

import createPersistedState from 'vuex-persistedstate';
import { getString, setString, remove, setNumber, setBoolean } from 'tns-core-modules/application-settings';

const store = new Vuex.Store({
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => {
          return getString(key);
        },
        setItem: (key, value) => {
          if (typeof value === 'number') {
            setNumber(key, value);
          } else if (typeof key === 'boolean') {
            setBoolean(key, value);
          } else {
            setString(key, value);
          }
        },
        removeItem: key => remove(key)
      }
    })
  ],
  modules: {
    counter,
    settings
  },
  strict: debug
});