npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

uni_template

v1.0.0

Published

a uniapp template

Downloads

1

Readme

uni_template

基于uView1.5.2搭建的快速开发模板

数据存储

提供vuexglobalDataStorage三种存储方式

vuex

/store/mixin.js文件向所有页面,组件注入了vuex中不包含modules的内容 因此,可以直接在页面中使用vuex中的内容

修改vuex内容 /store/mixin.js中同样挂在了修改方法 如需要修改vuex中的token字段,可使用this.$u.vuex('token', 'xxxx') 如需修改vuex中的user对象中的name字段,可使用this.$u.vuex('user.name', '张三') 如需修改vuex中module下的text中的ts字段,可使用this.$u.vuex('text.ts', 'xxx')

globalData

globalData存储的是全局变量,调用方式为

getApp().globalData.token

Storage

完全遵循uniStorage规则

http请求

/common/js/http.interceptor.js设置了请求配置、请求拦截器、响应拦截器 /common/js/http.api.js可以配置全局请求api**(尚未全局注册)**,如需注册,请解开/main.js第34,35行注释

多语言

多语言使用了vue-i18n插件,/common/js/international.js可以配置各种语言(尚未全局注册),如需注册,请解开/main.js第3,20,25行注释 使用方法:

  • 可以在template中直接使用{{ $t('index').game }}
  • 也可以使用计算属性computed: { index() { return this.$t('index') } }

暗黑模式(会出现闪现问题)

vuex中的themeStyle可取值whiteblack,即对应的正常模式暗黑模式 开发中请尽量使用css变量 如需使用换肤,可解开/store/mixin.js中第36,44行代码

关于下拉刷新,上拉加载

使用了mescroll 1.3.0版本 使用刷新,加载组件,必须在页面引入mixin文件

import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin]
}

单个

页面使用单个下拉刷新的话,可以使用page-view组件

<template>
	<page-view isScroll tabbar @up="upCallback" @down="downCallback">
		<block v-for="(item, idx) in list" :key="idx">
			<view>{{ item }}</view>
		</block>
	</page-view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			list: []
		}
	},
	
	methods: {
		upCallback(page) {
			this.getData(page.num)
				.then(res => {
					this.mescroll.endSuccess(res.length, res.next)
				})
		},
		
		downCallback() {
			// 将page.num重置为1,并执行一遍upCallback
			this.mescroll.resetUpScroll()
		},
		
		getData(page) {
			return new Promise(resolve => {
				this.$u.post('/xxx', {
					page: page,
					count: 10
				}).then(res => {
					const list = res.data.list
					
					page == 1 && (this.list = [])
					this.list = this.list.concat(list)
					
					resolve({
						lenght: list.length,	// 当前页面数据长度
						next: res.data.next	// 下一页是否还有数据
					})
				})
			})
		}
	}
}
</script>

多个

类似交易记录页面,会有topbar,待付款、待发货、代签收、已完成等等,这种页面处理刷新需要多个

<!-- 主页面 -->
<template>
	<page-view>
		<view class="u-tabs-box fixed-t">
			<u-tabs
				ref="tabs" 
				:activeColor="themeColor"
				:list="tabs" 
				:current="tabCurrent"
				@change="tabChange"
				:is-scroll="false" 
				swiperWidth="750"
				class="u-border-bottom"
			></u-tabs>
		</view>
		
		<!-- 待付款 -->
		<record-item ref="mescrollItem0" :i="0" :index="tabCurrent" :tabs="tabs"></record-item>
		
		<!-- 待发货 -->
		<record-item ref="mescrollItem1" :i="1" :index="tabCurrent" :tabs="tabs"></record-item>
		
		<!-- 待收货 -->
		<record-item ref="mescrollItem2" :i="2" :index="tabCurrent" :tabs="tabs"></record-item>
		
		<!-- 已完成 -->
		<record-item ref="mescrollItem3" :i="3" :index="tabCurrent" :tabs="tabs"></record-item>
	</page-view>
</template>

<script>
import RecordItem from './record-item.vue'
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";	// 必须
export default {
	components: {
		RecordItem
	},
	
	mixins: [MescrollMoreMixin],	// 必须
	
	data() {
		return {
			tabs: [
				{ name: '待付款' },
				{ name: '待发货' },
				{ name: '待收货' },
				{ name: '已完成' },
			],
			tabCurrent: 0,
		};
	},
	
	methods: {
		tabChange(index) {
			this.tabCurrent = index
		}
	}
}
</script>

RecordItem组件(具体请求方法,和单个的相同)

<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
			<!-- height="" -->
		<mescroll-body 
			ref="mescrollRef" 
			@init="mescrollInit" 
			top="80"
			:down="downOption" 
			@down="downCallback" 
			:up="upOption" 
			@up="upCallback">
			
			<!-- 渲染区域 -->
			
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
export default {
	mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	props:{
		i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
		index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			type: Number,
			default(){
				return 0
			}
		},
		tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
			type: Array,
			default(){
				return []
			}
		}
	},
	data() {
		return {
			downOption:{
				auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption:{
				auto:false, // 不自动加载
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
			},
			list: []
		}
	},
}
</script>