纯私人class，公开文章是方便置顶.... 

<!-- 自定义导航栏 占位空间 -->
<view class="navigationStyleCustomHeight alwaysOnTopBox0 bgColorForTheme"></view>

<!-- 自定义导航栏 -->
<view class="alwaysOnTopBox1 myNavBar">
        <uni-nav-bar shadow title="我的收货地址" leftIcon="back" rightIcon="search" @clickLeft="goBack" @clickRight="goSearch"></uni-nav-bar>
</view>

<style scoped>
    .myNavBar /deep/ .uni-nav-bar-text {
        font-size: 16px !important;
        font-weight: bold;
    }
</style>

<!-- 底部固定按钮 -->
<view class="alwaysAtBottomFullRow">
    <view class="box paddingCol20">
        <view class="buttonForTheme">
            确定
        </view>
    </view>
</view>

制作套壳APP

1. 新建uniapp项目（可以不使用uni-ui）
2. 修改 \pages\index\index.vue，在template的view中添加：
   <web-view src="https://xxx.com/xxx/"></web-view>
3. OK
4. 可以隐藏index.vue的顶部导航栏，或者全屏
   pages.json >> globalStyle >> 添加"navigationStyle": "custom"

自定义字体

1. 放置ttf文件到\static\xx.ttf
2. 参考 \static\customicons.css 修改ttf位置
3. 修改 \app.vue，引入上面的css文件
4. 在各自的pages的vue文件的style中使用 .xx { font-family: 'xx'; }
5. OK， 不行就重新编译app

全局通用css样式

修改 \app.vue，在style中引入，格式：
@import '@/static/xx.css';

全局函数、全局方法

\common\fn.js

function fn1 (param) { return 'result1'; }
function fn2 (param) { return 'result2'; }

export default {
    fn1,
    fn2
}

\main.js

import Vue from 'vue'
import App from './App'
import fn from './common/fn.js'

Vue.config.productionTip = false
Vue.prototype.$fn = fn

App.mpType = 'app'

const app = new Vue({
    fn,
    ...App
})
app.$mount()
 

\pages\xx\xx.vue

let xx = this.$fn.fn1( 'anything' )

全局变量定义、修改、读取

登录状态、退出登录

本地存储 (登录-记住我)

Tabbar底部标签栏实现

顶部导航栏修改、自定义、添加右边的按钮

页面下拉刷新

图片懒加载

页面触底刷新、下一页、分页

Ajax交互 - 文字

Ajax交互 - 文字 + 图片视频 (文件上传)

Ajax交互 - 文字 + PDF文件上传(或其他)

修改内置组件样式

自定义图标

App图标设置

App启动页

alert提示

confirm确认提示框

饼状图、柱状图、统计图表

获取短字符串 (后面星号代替)

// 获取短字符串 (后面星号代替)
get_short_string (str, max_length = 10, separator = '*') {
    // 字符串转数组
    let res = String(str)
    let arr = res.split('')
    
    // 星号长度
    let separator_length = 3
    
    // 正数
    max_length = Math.max(0, parseInt(max_length))
    
    // 星号除外的长度
    let cut_length = Math.max(0, max_length - separator_length)
    
    if (arr.length > max_length) {
        // 如果长度符合
        res = ''
        for (let i in arr) {
            if (i < cut_length) {
                // 切
                res += arr[i]
            }
        }
        // 拼接
        res += separator.repeat(separator_length)
    }
    return res
},

// 获取短字符串 (中间用星号代替)
get_short_string_two_sides (str, max_length = 10, side_length = 3, separator = '*') {
    // 规范
    max_length =  Math.max(0, parseInt(max_length))
    side_length = Math.max(0, parseInt(side_length))        // 两边明文长度
    
    // 字符串转数组
    let res = String(str)
    let arr = res.split('')
    
    // 直接返回短字符串
    if (arr.length <= max_length || arr.length < 4) {
        return res
    }
    
    // 调整两边明文长度
    let half_length = Math.ceil( max_length / 2 )             // 一半长度
    side_length = Math.min(side_length, half_length - 1)    // 两边明文长度 要小于一半长度
    
    // 星号开始下标
    let separator_start_index = side_length
    // 星号结束下标
    let separator_end_index = arr.length - side_length - 1
    // 星号长度
    let separator_length = max_length - side_length - side_length
    
    // 正数
    separator_length = Math.max(0, separator_length)
    
    // 开切
    res = ''
    let left = ''
    let right = ''
    for (let i in arr) {
        if (i < separator_start_index) {
            // 切
            left += arr[i]
        }
        
        if (i > separator_end_index) {
            // 切
            right += arr[i]
        }
    }
    // 拼接
    res = left + separator.repeat(separator_length) + right
    
    return res
},

多选 / 单选 - radio checkbox

常见页面 - 标签页切换 - 不同列表切换

<template><view><!-- Tab标签头部 --><view><view class="TopTabs" style="display: flex; flex-direction: row; justify-content: space-evenly;"><view class="oneTab" :class="{'active': showingTabIndex == 0}" @click="showingTabIndex = 0">All</view><view class="oneTab" :class="{'active': showingTabIndex == 1}" @click="showingTabIndex = 1">BB</view><view class="oneTab" :class="{'active': showingTabIndex == 2}" @click="showingTabIndex = 2">CC</view></view></view><hr><!-- Tab标签内容容器 --><swiper class="swiper" :indicator-dots="false" :autoplay="false" @change="swiperChanged":current="showingTabIndex" :style="{'height': height}"><swiper-item><!-- .oneDom容器 实际高度 会赋值给swiper作为高度 --><view class="oneDom"><view v-for="(item, key) in list" :key="'key'+key">{{ item }}<!-- 1到100 --></view></view></swiper-item><swiper-item>第二个列表</swiper-item><swiper-item>第三个列表</swiper-item></swiper></view>
</template><script>export default {data() {return {// 正在显示的标签页下标showingTabIndex: 0,// 测试数据 - onLoad以后填充1到100list: [],// 预设的swiper高度， 80%屏幕高度height: '80vh'}},// 页面OK以后onLoad() {// 测试数据填充 - 1到100for (var i = 1; i <= 100; i++) {this.list.push(i)}// 动态设置Swiper高度this.setH()},methods: {// 设置高度setH() {// 延时设置高度 -- 一定要延时，否则报错 - 300毫秒一般都够了setTimeout(() => {// uniapp自带方法 - 获取DOM的高度等信息// https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery// 节点查询const query = uni.createSelectorQuery().in(this)// 开始query.select('.oneDom').boundingClientRect(data => {console.log("【DOM尺寸信息】" + JSON.stringify(data))// 获取DOM的高度， 单位是像素let h = data.height// 补上单位h += 'px'// 实际高度赋值给swiperthis.height = hconsole.log('【动态设置高度】', h)}).exec()}, 300)},// 左右滑动时swiperChanged(e) {this.showingTabIndex = e.detail.currentconsole.log('Switch to Tab #', this.showingTabIndex)}}}
</script><style>/* 默认Tab样式 */.oneTab {color: black;padding-top: 10px;padding-bottom: 10px;position: relative;}.oneTab:after {content: '';position: absolute;left: 0;bottom: 0;width: 100%;border-bottom: 1px solid transparent;}/* active激活状态的Tab样式 */.oneTab.active {color: #d3bb30;}.oneTab.active:after {border-bottom: 1px solid red;}swiper-item {padding-left: 10px;}
</style>