希望官方赶紧出视频压缩的功能

公用模块

定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。

注意这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。

示例如下：
在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 helper.js 用于定义公用的方法。

const websiteUrl = 'http://uniapp.dcloud.io';  
const now = Date.now || function () {  
    return new Date().getTime();  
};  
const isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};  

export default {  
    websiteUrl,  
    now,  
    isArray  
}

接下来在 pages/index/index.vue 中引用该模块

<script>  
    import helper from '../../common/helper.js';  

    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + helper.now());  
        },  
        methods: {  
        }  
    }  
</script>

这种方式维护起来比较方便，但是缺点就是每次都需要引入。

挂载 Vue.prototype

将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来。

注意这种方式只支持vue页面

示例如下：
在 main.js 中挂载属性/方法

Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io';  
Vue.prototype.now = Date.now || function () {  
    return new Date().getTime();  
};  
Vue.prototype.isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};

然后在 pages/index/index.vue 中调用

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + this.now());  
        },  
        methods: {  
        }  
    }  
</script>

这种方式，只需要在 main.js 中定义好即可在每个页面中直接调用。

Tips

• 每个页面中不要在出现重复的属性或方法名。
• 建议在 Vue.prototype 上挂载的属性或方法，可以加一个统一的前缀。比如 $url、global_url 这样，在阅读代码时也容易与当前页面的内容区分开。

globalData

小程序中有个globalData概念，可以在 App 上声明全局变量。 Vue 之前是没有这类概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平台都实现了。
在 App.vue 可以定义 globalData ，也可以使用 API 读写这个值。

globalData支持vue和nvue共享数据。

globalData是一种比较简单的全局变量使用方式。

定义：App.vue

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        },  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  

<style>  
    /*每个页面公共css */  
</style>  

js中操作globalData的方式如下：

赋值：getApp().globalData.text = 'test'

取值：console.log(getApp().globalData.text) // 'test'

如果需要把globalData的数据绑定到页面上，可在页面的onshow声明周期里进行变量重赋值。HBuilderX 2.0.3起，nvue页面在uni-app编译模式下，也支持onshow。

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

HBuilderX 2.2.5+起，支持vue和nvue之间共享。参考

这里以登录后同步更新用户信息为例，简单说明下 Vuex 的用法，更多更详细的 Vuex 的内容，建议前往其官网 Vuex 学习下。

举例说明：

在 uni-app 项目根目录下新建 store 目录，在 store 目录下创建 index.js 定义状态值

const store = new Vuex.Store({  
    state: {  
        login: false,  
        token: '',  
        avatarUrl: '',  
        userName: ''  
    },  
    mutations: {  
        login(state, provider) {  
            console.log(state)  
            console.log(provider)  
            state.login = true;  
            state.token = provider.token;  
            state.userName = provider.userName;  
            state.avatarUrl = provider.avatarUrl;  
        },  
        logout(state) {  
            state.login = false;  
            state.token = '';  
            state.userName = '';  
            state.avatarUrl = '';  
        }  
    }  
})

然后，需要在 main.js 挂载 Vuex

import store from './store'  
Vue.prototype.$store = store

最后，在 pages/index/index.vue 使用

<script>  
    import {  
        mapState,  
        mapMutations  
    } from 'vuex';  

    export default {  
        computed: {  
            ...mapState(['avatarUrl', 'login', 'userName'])  
        },  
        methods: {  
            ...mapMutations(['logout'])  
        }  
    }  
</script>

详细示例，请下载附件，在 HBuilderX 中运行。

示例操作步骤：
未登录时，提示去登录。跳转至登录页后，点击“登录”获取用户信息，同步更新状态后，返回到个人中心即可看到信息同步的结果。

注意：对比前面的方式，该方式更加适合处理全局的并且值会发生变化的情况。

注意事项

* .vue 和 .nvue 并不是一个规范，因此一些在 .vue 中适用的方案并不适用于 .nvue。 Vue 上挂载属性，不能在 .nvue 中使用。**

更多

关于登录状态的维护，还可以参考 uni-app 的登录模板示例。可以在 github 获取源码，也可以在新建 uni-app 时“从模板创建”选择登录模板。

小程序发展这么久不得不说生态做的还是非常不错的，毕竟微信用户量在那放着。
大家都知道uniapp是采用小程序标准的，包括组件和api。不同的地方就是uniAPP采用了我们更加喜欢的vue。
所以，大部分小程序的插件uniapp都是可以使用的，只不过需要进行简单的处理。
好了少啰嗦，接下来分享下我移植小程序插件的经验及步骤。

1、.wxml 拷贝内容放在 .vue文件的 template标签下
2、修改基础语法，搜索 wx: 替换为 v-，搜索 bind 替换为 @，style、class、属性绑定方面有差别...具体就不细讲了，可以看看文档，很简单
3、.wxss 拷贝内容放在 .vue文件的 style 标签下，无需修改
4、.js onLoad、onShow等生命周期函数完全兼容，小程序的自定义函数要放在methods对象下
5、搜索 wx. 替换为 uni.，搜索 this.data 替换为 this 或者 数据对象按照以下写法：

data:{  
    data:{  
       key:val   
   }  
}

如果数据对象按照以上写法，以下请自行做出相应改动。
在逻辑层出来的时候个人认为比较费劲的就是小程序的setData了，以下是我的解决方案，完全兼容小程序，支持附点子元素赋值操作：

setData:function(obj){  
    let that = this;  
    let keys = [];  
    let val,data;  
    Object.keys(obj).forEach(function(key){  
         keys = key.split('.');  
         val = obj[key];  
         data = that.$data;  
         keys.forEach(function(key2,index){  
             if(index+1 == keys.length){  
                 that.$set(data,key2,val);  
             }else{  
                 if(!data[key2]){  
                    that.$set(data,key2,{});  
                 }  
             }  
             data = data[key2];  
         })  
    });  
}

6、api基本一致，具体请参考文档
至此基本上就OK了，总结的不够全面请大家多多指教。
以此文简单分享一下希望可以有用，也希望大家可以一起完善uniapp生态。
以下是我的一些功能，插件链接，望大家多多支持。
1、uniapp图片裁剪插件
2、swiper + scroll-view 实现下拉刷新
3、单击back隐藏到后台
4、【插件、图表】7种图表漂亮丰富

暂时解决思路：(缺点：在软键盘上来的时候选项卡会闪一下再消失)

获取选项卡的view（包括悬浮球：悬浮球是新绘制的view），运用setStyle（）修改view样式；

监听窗口大小变化resize事件，对应改变样式width宽度。（经测试修改的样式只能是在mainfest.json的subsubNViews=>styles下的样式，新增样式好像没反应，height高度好像会影响整个的布局，所有修改了width的样式）

下面是部分代码：

var tabBottom = 0,nview = plus.nativeObj.View.getViewById('tabBar');

// 监听window的resize,避免软键盘顶上底部选项卡

window.addEventListener('resize', function() {   
      if(tabBottom == 0){   
          nview.setStyle({    
             width: "0px"    
          });  
         drawNativeIcon.setStyle({    
             width: "0px"    
         });  
         tabBottom = 1;  
     }else{  
         nview.setStyle({    
               width: '100%'     
          });  
         drawNativeIcon.setStyle({    
         width: "60px"    
         });  
        tabBottom = 0;  
    }  
   console.log('at index.html:624 webView styles'+JSON.stringify(self.getStyle().subNViews[0].styles));  
});

闪一下再消失，还是感觉不太好，​请问各路大神还有什么更好的方法吗？

2018.9.14

优化了上述的问题解决方法：

解决底部选项卡被软键盘上顶问题：
获取屏幕高度固定在底部，不上顶
解决软键盘弹出后，有一段区域穿透父页面问题：
监听窗口大小变化时改变子页面原来bottom：51px，再次变化时修改回来

                            /// 避免软键盘顶上底部选项卡  
                nview.setStyle({  
                    top: (height - 50) + 'px',  
                });  
                drawNativeIcon.setStyle({  
                    top: (height - 60) + 'px',  
                });               
                window.addEventListener('resize', function() {  
                    if(activePage == plus.webview.getLaunchWebview()) {  
                        return;  
                    }  
                    if(tabBottom == 0) {  
                        activePage.setStyle({  
                            bottom:'0px'  
                        });  
                        tabBottom = 1;    
                    } else {  
                        activePage.setStyle({  
                            bottom:'51px'  
                        });  
                        tabBottom = 0;    
                    }  
                    app.log('self style',activePage.getStyle());                              
                });

声明：本插件移植自微信小程序插件wx-charts
https://github.com/xiaolin3303/wx-charts
感谢原作者！
我不生产插件，我只是好东西的搬运工~O(∩_∩)O哈哈~
需要的就伸手把，搬运移植也不容易，拿走记得留话。

其他功能插件：
1、uniapp图片裁剪插件
2、swiper + scroll-view 实现下拉刷新
3、单击back隐藏到后台

不啰嗦直接上图：

最后源码拿走不谢（记得留言）

　　本周我公司的技术人员做了一个有技术含量的一个新功能：客服功能。此功能主要用于微信公众号客服提醒，比如客户的商家认证审核通过，用户购买商品成功等功能提醒，可以有效减少网站项目开发所必要的资金节约。
1.接口代码。
接口代码如下：
public function reply_customer(){
$touser=I('touser');
$content=I('text');
$id=I("id");
//更换成自己的APPID和APPSECRET
$APPID="";
$APPSECRET="";

$TOKEN_URL="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$APPID."&secret=".$APPSECRET;  

$json=file_get_contents($TOKEN_URL);  
$result=json_decode($json);  

$ACC_TOKEN=$result->access_token;  

$data = '{  
    "touser":"'.$touser.'",  
    "msgtype":"text",  
    "text":  
    {  
         "content":"'.$content.'http://www.guangcupin.cc/Shop/info?id='.$id.'"  
    }  
}';  

$url = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=".$ACC_TOKEN;  

$result = $this->https_post($url,$data);  
$final = json_decode($result);  
echo  $final;  

}

public function https_post($url,$data)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($curl);
if (curl_errno($curl)) {
return 'Errno'.curl_error($curl);
}
curl_close($curl);
return $result;
}
2.php调用接口代码
Php代码如下：
public function fenxiang(){
if(empty(session("uid"))){
$this->redirect("Init/init");
}

$uid=session("uid");
// echo $uid;exit;
$info=M("user")->where("uid=$uid")->find();
$mtime= strtotime("-1 hour");
$where['uid']=$uid;
$where['addtime']=array("gt",$mtime);
$where['fabu']=1;
$list=M("good")->where($where)->order("addtime desc")->limit(1)->find();
if($list){
$touser=$info['openid'];
$text="朋友圈分享文字，提供参考：".$list['desc'].",有喜欢的可以出价，截拍时间：".date("Y-m-d H:i",$list['end_time'])." 点击链接出价:";
$id=$list['id'];
// echo $id;exit;
$this->reply_customer1($touser,$text,$id);
}
}

　　好了，现在大家明白是如何来实现了吧，如果还是存在不理解的地方或者做到中间不清楚该如何继续下去的话，可以留言咨询，我们可以一起讨论学习。

　　本文由专业的郑州小程序开发公司燚轩科技整理发布，原创不易，如需转载请注明出处!

之前一直用vue-i18n，后来发现$t始终出不来。
最后使用了vuex-i18n，$t()可以用this.$i18n.translate()来代替，总算暂时解决了多语言问题。纠结了我好久

ps:可能vue-i18n也有$t的替代方法，可是文档内容太多看花眼了

main.js

import Vue from 'vue'  
import App from './App'  

import store from './store'  
import vuexI18n from 'vuex-i18n';  

Vue.use(vuexI18n.plugin, store);  

const translationsEn = {  
    "content": "This is some {type} content"  
};  

const translationsDe = {  
    "content": "Dies ist ein toller Inhalt",  
};  

// add translations directly to the application  
Vue.i18n.add('en', translationsEn);  
Vue.i18n.add('de', translationsDe);  

// set the start locale to use  
Vue.i18n.set('de');  

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

App.mpType = 'app'  

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

index.vue

<template>  
    <view class="content">  
        <text class="title">{{title}}=>{{t_content}}</text>  
        <button type="primary" @tap="ddd">button</button>  
    </view>  
</template>  

<script>  
    export default {  
        data: {  
            title: 'Hello',  
            cur_lang: 'en'  
        },  
        computed:{  
            t_content(){  
                return this.$i18n.translate('content')  
            }  
        },  
        methods:{  
            ddd(){  
                console.log(1122)  
                console.log(this.$i18n.translate('content'))  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        flex: 1;  
        justify-content: center;  
        align-items: center;  
    }  

    .title {  
        font-size: 36px;  
        color: #8f8f94;  
    }  
</style>  

注意：本文仅对使用过HBuilderX 0.1.45-48的用户有意义，集中在2018年8月。之后的用户无需关心此文。

自HBuilderX 0.1.49 之后创建的uni-app项目，使用 rpx（upx） 作为响应式尺寸单位，rpx 可以根据屏幕宽度进行自适应；在新创建的uni-app项目中，px 是传统css尺寸单位。

但历史版本的uni-app曾使用 px 作为响应式尺寸单位（作用同 rpx ），uni-app 框架保留了对历史创建项目的向下兼容，开发者可按如下方式维护升级历史项目。

方案1：继续保留 px 为响应式尺寸单位

uni-app 历史项目可以继续将 px 作为响应式尺寸单位，继续之前的尺寸换算，框架会自动处理。

Tips 1：动态绑定的 style不支持响应式尺寸单位

<!-- - 静态px赋值，此时为响应式单位 -->  
<view class="test" style="width:200px"></view>  
<!-- - 动态绑定不生效，此时变成传统css单位 -->  
<view class="test" :style="{width:winWidth + 'px;'}"></view>  

Tips 2：若在历史项目中引入了使用px作为传统css尺寸单位的的示例组件，比如 hello uni-app 中新增的 多列选择、联动选择示例（含城市选择），则会导致同一项目中，px既作为响应式尺寸单位，又作为传统css尺寸单位，导致混乱，此时建议按照如下方案2的步骤，将历史项目的px升级替换为rpx（注意更改manifest.json文件），然后再引入使用px作为传统css尺寸单位的的示例组件

方案2：使用 rpx 作为响应式尺寸单位

开发者可以按如下步骤将 px 升级为 rpx：

• 全局搜索 px 替换为 rpx
• 在manifest.json根节点下，增加"transformPx":false

注意：如此替换升级后，px 恢复为传统的css尺寸单位，不再根据屏幕宽度自动响应。

目前安卓只能这样：
/**

• 5+内核初始化完成时触发

• */
  @Override
  public void onCoreInitEnd(ICore coreHandler) {
  String appBasePath = "/apps/H5928EE6E";
  String args = "{url:'http://www.baidu.com'}";

  app = SDK.startWebApp(activity, appBasePath, args, new IWebviewStateListener() {  
      // 设置Webview事件监听，可在监监听内获取WebIvew加载内容的进度  
      @Override  
      public Object onCallBack(int pType, Object pArgs) {  
          switch (pType) {  
          case IWebviewStateListener.ON_WEBVIEW_READY:  
  
              IWebview webview = ((IWebview) pArgs);  

只能设置appBasePath，不能像苹果那样可以设置路径到index.html 这一层，如果能设置到index.html这一层到话，我就可以在index.html后面加参数，比如：/apps/H5928EE6E/www/......./index.html?param=xxx
,我知道可以设置args，然后通过plus.runtime...来获取，但是 我需要的是在plusReady之前就能获取到参数。
麻烦了。

该模板基于MUI开发尽量保证MUI的原有功能并结合了iconfont图标库、大大提升填补了MUI缺少及美化页面，美化页面如下：

主页美化、产品列表（筛选）、产品详情（加入购物车弹层、右上角下拉）、商家详情（基于MUI多页面切换）、购物车（购物车多选）、购物车订单结算、会员中心美化（居中弹层）、收货地址（地区选择）、关于我们（基于MUI多页面切换）、订单列表、订单详情（物流查询页面）、产品评论（星级评价）、登录注册页面美化。
http://www.8sk.cn/Download/760.html

　　在前端浏览器中，有些数据(比如数据字典中的数据)，可以在第一次请求的时候全部拿过来保存在js对象中，以后需要的时候就不用每次都去请求服务器了。对于那些大量使用数据字典来填充下拉框的页面，这种方法可以极大地减少对服务器的访问。因此这种方法特别适用于使用iframe的框架。

　　具体实现思路和方法如下：

　　创建一个cache.js文件：

　　1、前端页面，定义那些数据需要一次性拿到前端缓存，定义一个对象来保存这些数据：

　　/**

　　* 定义需要在用户登录的时候获取到本地的数据字典类别

　　*/

　　var clsCodes = {"clsCodes" :

　　["BOOL",

　　"STATUS",

　　"USER_TYPE",

　　"REPORT_STATUS"

　　]

　　};

　　/**

　　* 获取数据字典到本地

　　*/

　　var dicts;

　　2、前端页面，定义一个函数来调用后台接口获取数据，然后保存到本地缓存对象(dicts)中。

　　function getDicts() {

　　$.post(getContextPath() + "/api/sys/getDictList",

　　clsCodes,

　　function(resultBean, status, xhRequest) {

　　if (resultBean.data != undefined) {

　　dicts = resultBean.data;

　　}

　　},

　　'json');

　　}

　　在主页面加载的时候调用这个方法一次性获取数据并缓存起来。这样，以后需要同样的数据，就直接从本地对象dicts中获取了。如果大家还存在疑问的话，可以留言咨询，我们可以共同学习，一起进步。

　　本文由专业的郑州app开发公司燚轩科技整理发布，原创不易，如需转载请注明出处!

hbuildX打包苹果企业版证书，发布出去是内测版。用hbuilder 打包是正常的企业版