不需要下载安装，便可以在微信好友、微信群之间快速的转发，用户只需要扫码或者在微信里点击，就可以立即运行，有着近似APP的用户体验，使得微信小程序成为全民热爱的好东西~

同时因为微信小程序使用的是Javascript语法，对前端开发人员而言，几乎是没有学习成本和技术门槛的。对于大部分场景，都可以使用小程序快速开发实现，不论是开发周期还是开发成本都低的让人笑哭，所以受到了技术开发团队的各种追捧~

但如果要在小程序里快速的实现一个即时通讯功能，就有点尴尬，因为微信官方提供的只是一个底层的websocket api，要在项目中直接使用，还需要做很多额外的工作，比如首先就需要搭建自己的websocket服务~

那有没有简单的方式呢？ 当然是有的！

今天小编就手把手的教您用GoEasy在微信小程序里，最短的时间快速实现一个websocket即时通讯Demo。

本demo已经完成了真机下的小程序的测试，完整源代码开源到oschina的码云上，clone后，只需要将代码里的appkey换成自己的common key，就可以体验了。源码网址：https://gitee.com/goeasy-io/GoEasyDemo-wxapp-Helloworld

1、获取appkey

GoEasy官网（https://www.goeasy.io/）上注册账号，创建一个应用，拿到您的appkey。

GoEasy提供了两种类型的appkey：

• Common key: 即可以接收消息，也可以发送消息，与Subscribe Key最大的区别就是有写权限，可以发消息。适用于有消息发送需求的客户端和服务端开发。

• Subscribe key: 只能接收消息，不可以发送消息，与Common Key最大的区别就是没有写权限，只能收消息。可以用于一些没有发送需求的客户端。

2、获取GoEasy SDK

下载 https://cdn.goeasy.io/download/goeasy-1.0.11.js

import GoEasy from './goeasy-1.0.11';

3、初始化GoEasy对象

var self = this;  
this.goeasy = GoEasy({  
    host: 'hangzhou.goeasy.io',  
    appkey: "您的appkey",  
    onConnected: function () {  
        console.log("GoEasy connect successfully.");  
        self.unshiftMessage("连接成功.");  
    },  
    onDisconnected: function () {  
        console.log("GoEasy disconnected.")  
        self.unshiftMessage("连接已断开.");  
    },  
    onConnectFailed: function (error) {  
        console.log(error);  
        self.unshiftMessage("连接失败，请检查您的appkey和host配置");  
    }  
})

根据您在GoEasy后台创建应用时选择的区域，来传入不同的Host,如果您创建GoEasy应用时,选择了杭州，那么host:"hangzhou.goeasy.io"。选择了新加坡,host:"singapore.goeasy.io"。

如果您的大部分用户都是在国内，创建应用时，记得选择杭州，以便获得更快的通讯速度。

4、小程序端接收消息

var self = this;  
this.goeasy.subscribe({  
    channel: "my_channel",  
    onMessage: function (message) {  
        self.unshiftMessage(message.content);  
    },  
    onSuccess: function () {  
        self.unshiftMessage('订阅成功.');  
    }  
});

很多朋友会问channel从哪里来，如何创建，应该传入什么呢？

根据您的业务需求来设定，channel可以为任意字符串，除了不能包含空格，和不建议使用中文外，没有任何限制，只需要和消息的发送端保持一致，就可以收到消息。channel可以是您直播间的uuid,也可以是一个用户的唯一表示符，可以任意定义，channel不需要创建，可以随用随弃。

5、小程序端发送消息：

发送时，需要注意channel一定要和subscribe的channel完全一致，否则无法收到。

this.goeasy.publish({  
    channel: "my_channel",  
    message: self.data.message,  
    onSuccess: function () {  
        self.setData({  
            message: ''  
        }); //清空发送消息内容  
        console.log("send message success");  
    },  
    onFailed: function (error) {  
        self.unshiftMessage('发送失败，请检查您的appkey和host配置.');  
    }  
});

本代码源码下载：https://gitee.com/goeasy-io/GoEasyDemo-wxapp-Helloworld

特别强调：

在运行之前，一定要在微信公众号平台配置socket合法域名，否则无法建立连接。具体步骤：
访问https://mp.weixin.qq.com，进入微信公众平台|小程序 -> 设置 -> 开发设置 -> 服务器域名
socket合法域名-> 添加GoEasy的地址： wx-hangzhou.goeasy.io（记得wx-开头）
若您创建GoEasy应用时选择了新加坡区域则添加地址：wx-singapore.goeasy.io

答疑时间：

1、我的服务器端可以给小程序发送消息吗？都支持些哪些语言？

当然可以，任何语言都可以通过调用GoEasy的Rest API发送消息，同时为了大家方便，GoEasy的官方文档里，也准备了Java, C#,NodeJS，PHP，Ruby和Python等常见语言调用REST API的代码，这里获取更多详情：https://www.goeasy.io/cn/doc/server/publish.html

2、GoEasy可以发送图片，语音和视频吗？

当然可以，您可以通过推送文件路径的方式来实现文件的发送。
按照行业惯例，不论MSN，微信，QQ对于图片和视频，通常的做法都是，只推送文件路径，而不会推送文件本身。你如果有注意的话，当您接受图片和视频的时候，收到消息后，等一会儿才能看，就是因为发送的时候，只发送了路径。

3、GoEasy和微信小程序官方的websocket API有什么区别和优势？

小程序官方的websocket API主要是用来与您的websocket服务通讯，所以使用小程序websocket的前提是，首先要搭建好您自己的websocket服务，然后与之通讯。这是一个纯技术的API，在建立网络连接后，还有很多的工作需要自己来完成，比如：

• 需要自己实现心跳机制，来维护网络连接，来判断客户端的网络连接状态；
• 需要自己实现断网自动重连；
• 需要自己维护消息列表，确保遇到断网重连后，消息能够补发；
• 需要自己维护一个客户端列表；
• 等等很多细致而繁杂的工作，比如websocket的安全机制和性能优化；

此之外服务端也有很多工作需要自己完成，有兴趣自己搭建websocket的话，可以参考这篇技术分享《搭建websocket消息推送服务，必须要考虑的几个问题》

而GoEasy是一个成熟稳定的企业级websocket PAAS服务平台，开发人员不需要考虑websocket服务端的搭建，只需要几行代码，就可以轻松实现客户端与客户端之间，服务器与客户端之间的的websocket通信，不需要考虑性能，安全，高可用集群的问题,只需要全力专注于开发自己的业务功能就好了。

GoEasy已经内置websocket中必备的心跳，断网重连，消息补发，历史消息和客户端上下线提醒等特性，开发人员也不需要自己搭建websocket服务处理集群高可用，安全和性能问题。GoEasy已经稳定运行了5年，支持千万级并发，成功支撑过很多知名企业的重要活动，安全性和可靠性都是久经考验。

4、GoEasy在小程序的开发中主要用在哪些场景呢？

从应用场景上来说，所有需要websocket通信的场景，GoEasy都可以完美支持：

• 聊天，IM，直播弹幕，用户上下线提醒, 在线用户列表
• 扫码点菜，扫码登录， 扫码支付， 扫码签到， 扫码打印
• 事件提醒，工单，订单实时提醒
• 在线拍卖， 在线点餐，在线选座，实时数据展示，金融实时监控大屏，实时行情显示，设备监控系统
• 实时位置跟踪，外卖实时跟踪，物流实时跟踪
• 远程画板，远程医疗，远程在线授课

5、GoEasy的文档为什么这么简单？简单到我都不知道如何使用

简单还不好吗？GoEasy从研发的第一天，就把追求API的极简作为我们的工作重点。严格控制接口的数量，就是是为了降低开发人员的学习成本，其实就是为了让您爽啊！但这并不影响GoEasy完美支持所有的websocket即时通讯需求。

GoEasy官网：https://www.goeasy.io

GoEasy系列教程：

• 搭建websocket消息推送服务，必须要考虑的几个问题

• websocket IM聊天教程-教你用GoEasy快速实现IM聊天

• Websocket直播间聊天室教程-GoEasy快速实现聊天室

• 微信小程序使用GoEasy实现websocket实时通讯

• Uniapp使用GoEasy实现websocket实时通讯

• IM聊天教程:发送图片/视频/语音/表情

先执行 uni.request 然后打印 2222...

文章地址：参考文章地址（博客园）

HBuiler报错，再打开所有项目只剩下。project文件，怎么恢复

第一个 APP 快开发完了，结果发现个重大问题！

子页面用 uni.＄emit 转值 给父页面，父页面用uni.＄on 接收值判断是否刷新面页，正式测试时发页面数据刷新时 onShow 居然会重复多次触发。

找了一整天问题，反复琢磨了 2 天，第 3 天终于找出了问题根源！

uni-app 的 api 文档 里只说了用什么方式传值，但没说需要注意的地方！

使用 uni.＄emit 传值后必须在使用页面的onUnload中加入 uni.＄off 关闭全局监听才行，否则面子页面无法完全释放，父页面就会多次触发带有 uni.＄on 代码的 onShow()。

花了 2 天时间把程序里所有涉及 uni.＄emit 的页面加了uni.＄off 代码后问题全部解决！

没办法，入坑就入坑，反正比直接搞原生的代码方便很多！

承接各种APP开发，5+插件开发、uniapp插件开发，nvue嵌入插件、及离线打包等业务 qq：37894663

iOS发布证书用于上架App Store，当开发好APP后需要上架就要用iOS底部证书有p12及mobileprovision两个文件去打包！

只有用iOS发布证书打包的ipa才能上传到App Store

一、申请iOS发布证书（p12文件）

​​

使用Appuploader软件申请，可以辅助在Windows、linux或mac系统直接申请iOS证书p12，及上传ipa到App Store，最方便在Windows开发上架没有苹果Mac电脑的开发者！

1.1、用苹果开发者账号登录appuploader软件后，选择证书进入，点击右下角+ADD选择

类型：下拉选择发布证书

证书名称：不要中文、不要太长了、随意设置

邮箱：随意

密码：证书的密码、比如设置123这样，不用很复杂，记好、打包时要用、很重要

应用id：这里不用选

点击ok创建。

1.2、创建成功后，找到刚创建的发布证书（iOS Distribution这个类型的就是发布证书，如果之前创建过看过期时间或者ID就知道哪个是新创建的了）！

点击p12 文件,下载保存.p12证书文件到电脑。

二、创建iOS发布描述文件（.mobileprovision文件）

2.1、点击右下角BACK、返回Appuploader首页，选择描述文件进去。

2.2、点击右下角+ADD，进入申请界面！

Type：下拉选择发布版profile

应用id:下拉选择对应的应用id（又称套装id，appid，BundleID，包名）

证书：选中全部就行

Devices：发布版不用选设备

输入名称：不要中文，随意，123之类的就行，注意不要跟之前申请过的名称一样），点击ok创建。

2.3、选择刚创建的发布版描述文件（iOS Distribution这个类型的就是发布描述文件，找刚创建的输入的名称），点击Download下载，保存到电脑

把申请到的iOS证书(.p12)和描述文件(.mobileprovision)这两个文件下载，上传到打包平台打包即可。

（1）用户的操作习惯。只有符合用户操作习惯的界面和按钮分布才能给用户更好的体验。
（2）用户人群的属性。用户的人群定位，区域定位，年龄层等，决定了APP的使用环境。企业应针对用户去开发和设计合适的功能和界面。
（3）减少APP的访问级别。在移动终端上，如果有太多的访问级别会使用户失去耐心，甚至放弃使用。
（4）功能精简。开发APP不是功能越多越好，页面也不是越炫越好。事实证明，用户更喜欢简单大方的风格。所以企业在考虑功能时，一定要越精简越好，主次分明。
app定制开发，app定制开发项目、APP团队开发
158-3211-5099

云打包时建议保存签名密码，，，
打包五十多次了，每一次都要签名密码实属麻烦，
要么保存到项目id下的云端上。
要么可以保存到本地

项目构建

使用npm包

使用npm init -y初始化npm项目，然后使用你喜欢的方式（npm、yarn）安装你需要的npm包；非h5平台的项目不支持使用到dom操作的包。

使用小程序组件

使用小程序组件需要在pages.json中进行配置，在具体的页面中引用：

{  
  "path":"pages/Home/index",  
  "style": {  
    "navigationBarTitleText": "首页",  
    "usingComponents": {  
      "van-search": "/wxcomponents/vant-weapp/search/index"  
    }  
  }  
}

在全局使用：

"globalStyle": {  
  "navigationBarTextStyle": "black",  
  "navigationBarTitleText": "uni-app",  
  "navigationBarBackgroundColor": "#F8F8F8",  
  "backgroundColor": "#F8F8F8",  
  "usingComponents": {  
    "van-button": "/wxcomponents/vant-weapp/button/index",  
    "icon": "/wxcomponents/vant-weapp/icon/index",  
    "van-search": "/wxcomponents/vant-weapp/search/index"  
  }  
},

注意 引用的组件名必须为小写，不然可能会出现无法找到组件的问题

条件编译

官网已经有比较详细的说明了，通过特殊的注释语法来实现代码级别的条件编译，语法是以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

需要特别说明下的是整体目录条件编译，下项目根目录建立platforms文件夹，然后根据不同的平台建立不同的文件夹（如手机端创建app-plus文件夹），在pages配置path就会根据不同的平台加载不同的页面了。

{  
    "path": "platforms/app-plus/speech/speech",  
    "style": {  
        "navigationBarTitleText": "语音识别"  
    }  
}

上面配置的页面只会在app-plus相关平台加载。

easycom组件模式

hbuilder支持easycom组件模式，一般使用组件我们需要安装、引用、注册三个步骤。easycom组件模式下，你只需将组件下载到components目录下，并符合components/组件名称/组件名称.vue的目录结构，你就可以直接在页面中使用组件，而不用导入，注册；并且没有使用到的组件会在打包时自动剔除。

easycom也支持自定义配置，具体可以查看官方文档

开发项配置

在我们进行开发时，我们可以指定启动页面，启动项目需要在pages.json中配置，可以配置多项，然后运行时进行选择。

"condition" : { //模式配置，仅开发期间生效  
 "current": 0, //当前激活的模式(list 的索引项)  
 "list": [  
   {  
     "name": "Market", //模式名称  
     "path": "pages/Cart/index", //启动页面，必选  
     "query": "" //启动参数，在页面的onLoad函数里面得到  
   }  
 ]

注意：query启动参数并不像官方文档里说的，可以在onLoad函数中获取到，后面我们也会提到这个问题和相应的解决方法。

环境变量

内置环境变量process.env.NODE_ENV，我们可以通过这个之判断当前的运行环境，实现在不同的环境下使用不同的方式。

const isDev = process.env.NODE_ENV === 'development'  
const http = axios.create({  
  baseURL: isDev ? DEV : PRO,  
  timeout: 3000  
})

开发技巧

本地图片

uni-app支持使用本地图片，本地图片可以直接在image标签中引入使用，也可以作为背景图片使用；本地图片会在不支持本地图片的平台（小程序）中，自动转换为base64的格式，但是要求图片必须小于40kb；使用图片的引用路径应该使用~@开头，不然在window中可能出现找不到资源的问题。

通过image标签使用本地图片，图片会以base64的格式存储在打包后的vendor.js文件中，这个文件会在小程序加载时引用，如果使用太多的本地图片会导致小程序首次运行速度变慢；通过背景图片的方式使用，图片会存储在引用文件的样式文件中，会增加包的大小，但是对启动速度的影响不大。

体积较大的图片建议使用网络图片，体积小的图片也应该尽量不要在image标签引用，而是以背景的图片的形式来使用。

小程序分享

小程序分享是通过点击open-type为share的button或者页面的分享按钮来触发的，分享的内容是页面onShareAppMessage的返回值，返回值包含title-分享标题，path-分享路径，imageUrl-分享图片，onShareAppMessage只能定义在页面上，在组件中定义是没有用的。

如果你分享的信息是动态的，你可以通过按钮的data-绑定数据：

<button open-type="share"   
        :data-title="***"   
        :data-imgurl="***"  
        :data-path="***">  
</button>

然后在回调函数中可以获取数据：

onShareAppMessage(data) {  
    let dataset = data.target.dataset  
    return {  
        title: dataset.title,  
        imageUrl: dataset.imgurl,  
        path: dataset.path  
    }  
},

生命周期

在uni-app中，有些时候生命周期的表现会出人意料，让人措手不及：

通过小程序分享时，我们往往会带上路由参数，uni-app的启动选项也是可以配置参数，正常的路由跳转我们可以在onLoad中获取参数，但是在刚才我们说的两种场景中，在onLoad中我们是无法获取参数的，只能在onLauch中获取，如果需要获得路由参数，我们只能在onLauch中获取，然后通过其他方式（vuex或者其他方式）保存，然后在需要的地方获取使用。

tab页面与其他页面的生命周期也不同一样，tab页面切换不会触发onLoad事件，而打开一般的页面会触发onLoad页面。

back返回上一页时，一般是不会触发onLoad，但是会触发onShow。

在选择图片时，打开相册，再回到小程序会触发小程序应用的onShow。

上传图片

uni中可以使用uni.uploadFile接口上传文件：

uni.chooseImage({  
    success: (chooseImageRes) => {  
        const tempFilePaths = chooseImageRes.tempFilePaths;  
        uni.uploadFile({  
            url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址  
            filePath: tempFilePaths[0],  
            name: 'file',  
            formData: {  
                'user': 'test'  
            },  
            success: (uploadFileRes) => {  
                console.log(uploadFileRes.data);  
            }  
        });  
    }  
});

如果你使用了第三方的对象存储OSS你也可以使用uni.uploadFile实现直传：

1. 配置Bucket跨域访问；客户端进行表单直传到OSS时，会从浏览器向OSS发送带有Origin的请求消息。OSS对带有Origin头的请求消息会进行跨域规则（CORS）的验证。因此需要为Bucket设置跨域规则以支持Post方法。在OSS管理控制台，修改相关规则配置。
2. 配置外网域名到小程序的域名白名单；在OSS管理控制台的访问域名区域查看Bucket域名，然后登录小程序平台，配置小程序的上传域名白名单，如果不配置不会影响开发环境的上传，但是发布（包含发布体验版）的小程序会无法上传。
3. 根据平台要求，生成上传需要的信息，使用uni.uploadFile上传

import md5 from 'md5'  

export default ({ dir, host, expire, signature, policy, accessid }) => {  
  return new Promise((resolve, reject) => {  
    uni.chooseImage({  
      count: 1,  
      success: (res) => {  
        const filePath = res.tempFilePaths[0]  

        const ext = filePath.replace(/([\S\s]+)\.(\S+)$/, '$2')  
        const key = `${dir}/${md5(Math.random())}.${ext}` // 文件名MD5重命名  
        uni.uploadFile({  
          url: host,  
          filePath,  
          name: 'file',  
          formData: {  
            policy,  
            OSSAccessKeyId: accessid,  
            signature,  
            expire,  
            key,  
          },  
          success: () => {  
            resolve(`${host}/${key}`) // 返回图片地址  
          },  
          fail (err) {  
            reject(err)  
          }  
        })  
      },  
      fail (err) {  
        reject(err)  
      }  
    })  
  })  
}

如果使用的是阿里云可以参考这份文档-小程序直传实践

小程序顶部适配

在某些场景下，我们需要自定义标题栏，但是标题栏的高度在不同型号的手机中可能是不相同的，这里我们能可以通过微信小程序右上角的胶囊位置来做适配。

我们可以通过uni.getMenuButtonBoundingClientRect()获取到胶囊的相关信息menuButton，menuButton包含胶囊的位置信息top、bottom、left、right，和胶囊尺寸信息width、height；我们通过这些信息就可以计算出合适的标题栏高度。

滚动

页面级别的滚动由pages.json中page的style项进行配置，相关值如下：

页面生命周期中除了onPullDownRefresh和onReachBottom，还有onPageScroll，用于监听页面滚动，参数是一个对象，包含属性scrollTop，表示页面在垂直方向已滚动的距离（单位px）。

可视化滚动区域需要通过scroll-view来实现，通过css属性overflow设置滚动，在真机上无法滚动。

scroll-view使用竖向滚动的时候需要一个固定高度，这个高度可以是calc高度或者是flex。

scroll-view的滚动条设置，可通过css的-webkit-scrollbar自定义，包括隐藏滚动条。

在ios中如果设置了scroll-view，会出现橡皮筋回弹效果，页面的回弹效果可以通过disableScroll: true取消，但是如果是scroll-view标签，你只能设置scroll-y为false，如果即需要滚动有想要取消回弹效果，可以通过监听scroll-view的相关事件，判断滚动状态，在回弹的情况时，设置scroll-y为false，来阻止回弹。

详情参考：小程序取消橡皮筋回弹效果解决方案及坑总结

uni还提供uni.pageScrollTop方法，将页面滚动到目标位置-说明

其他

开启微信调试工具vConsole，并使用条件编译设置只在小程序中使用：

//#ifdef MP-WEIXIN  
wx.setEnableDebug({  
    enableDebug: false  
})  
//#endif

ios微信/Safari中时间格式化的问题，new Date()要求字符串必须的类似与2018-05-31T00:00:00的格式，日期与时间之间不能是其他字符或者空格，否则结果会是NaN。

使用css样式，扩大可点击区域：

position: relative;  
&:before {  
    content: '';  
    position: absolute;  
    top: -10px; bottom: -10px; left: -10px; right: -10px;  
};

初始次使用uni-app开发， 目前仅有几名前端开发人员，记录一下我们遇以的问题。

现阶段遇到的问题：

1. 修改原生组合，遇到困难，开始没找到方向， 需要进一步学习
2. 部分css属于不能用，如百分比，要换成rpx，对rpx要进一步学习
3. 加载的图片宽高不能自适应，要找对应的解决方法

我们要开发的app，要用到部分的原生app功能，如上传图片，以及微信分享，为了确保项目不会半途而废，开发到了后期发现有些功能实现不了，决定要先行验证以下功能：

1. uni-app加载url的页面，与nvue开发页面交互（数据交互和分享功能）
2. 原生开发页面实现分享+图片上传的功能
3. 开放能力，展业app能打开其他app或小程序
4. 全屏及横屏模式
5. android和iOS平台编译打包

求 nui 方式弹出输入框
求 nui 方式弹出输入框
求 nui 方式弹出输入框
求 nui 方式弹出输入框
求 nui 方式弹出输入框