相信各位在开发的时候应该有遇到这样一个场景，比如商品的图片浏览，有时图片的浏览会很大，多的时候达几百张或上千张，这样就需要swiper里需要很多swiper-item，如此一来渲染的时候就会很消耗性能，渲染时会有一大段的空白时间，有时还会造成卡顿，体验非常差，下面给大家介绍一下我的解决方案。 首先是wxml结构： [图片] js： [图片] [图片] 主要是利用current属性，swiper里面只放3个swiper-item，要显示的图片放在第二，第一和第三放的是加载的动画背景，步骤如下： 将请求到的数据存入一个数组picListAll内，这里不需要setData，只需要在data外面定义一个变量就行了，以减少渲染性能； 把要显示的图片路径赋值给picUrl； 切换的时候根据bindchange获取current属性，当current改变时判断当前图片在picListAll的index，根据index拿到图片再赋值给picUrl； 主要实现步骤就是以上3 步，比较简单，要注意的是当切换到第一张和最后一张的时候要判断一下，把loding动画去掉，请求的时候还可以传入index参数以显示不同的图片，方便从前一页点击图片进入到此页面时能定位到该图片，例子里我是自己mock数据的，只是为了展示，如果你有服务器的话可以弄几百张看看效果，对比直接渲染和用以上方式渲染的差异。当然,这只是我的解决方案,如果各位有更好的方案欢迎一起讨论,一起进步。 完整代码：https://github.com/HaveYuan/swiper

有了云开发我们不仅可以方便的获取到用户的openid，还可以通过云开发的数据库来存储用户信息，进而实现小程序用户的登陆与注册功能。 本节知识点 1，云开发的使用 2，云函数的使用 3，云数据库的使用 4，用户登陆 5，用户注册 涉及到三个页面 1，登陆页面 [图片] 2，注册页面 [图片] 3，登陆成功 [图片] 下面来看具体的代码实现 一，注册页面实现 1,register.wxml [代码]<!--pages/register/register.wxml--> <input class='input' placeholder='请输入用户名' bindinput='inputName'></input> <input class='input' placeholder='请输入密码' bindinput='inputPassword'></input> <input class='input' placeholder='请输入电话' bindinput='inputPhone'></input> <input class='input' placeholder='请输入地址' bindinput='inputAddress'></input> <button class='button' type='primary' bindtap='register'>注册</button> [代码] 2,register.js 需要注意的是我们注册时需要使用到云开发数据库，在使用云开发数据库之前还需要初始化云开发，代码里都有注释 [代码]// pages/register/register.js let app = getApp(); // 获取数据库引用 const db = wx.cloud.database(); const userListDB = db.collection('userlist'); let name = null; let password = null; let phone = null; let address = null; Page({ /** * 页面的初始数据 */ data: { }, //输入用户名 inputName(evnet) { name = evnet.detail.value; }, //输入密码 inputPassword(evnet) { password = evnet.detail.value; }, //输入手机号 inputPhone(evnet) { phone = evnet.detail.value; }, //输入地址 inputAddress(evnet) { address = evnet.detail.value; }, //注册 register() { let that = this; if (!app.checkNamePassword(name, password)) { return; } if (!app.checkPhoneAddress(phone, address)) { return; } //查询用户是否已经注册 userListDB.where({ _openid: app.globalData.openid // 填入当前用户 openid }).get({ success: function(res) { let userInfos = res.data; console.log(res.data) if (userInfos && userInfos.length > 0) { let user = userInfos[0]; if (user && user.name) { wx.showModal({ title: '提示', content: '您已注册，确定要更新账号密码吗？', success: function(res) { if (res.confirm) { console.log('用户点击确定') that.saveuserinfo(); } } }) } } else { that.saveuserinfo(); } } }) }, saveuserinfo() { let that = this; userListDB.doc('_openid').set({ data: { name: name, password: password, phone: phone, address: address } }).then(res => { app.showTips('注册成功'); }) }, }) [代码] 3，在app.js里初始化云开发 下面的prod-8aa9a5就是我们云开发的环境id [代码]//app.js App({ onLaunch: function() { //云开发初始化 wx.cloud.init({ env: 'prod-8aa9a5', traceUser: true }) } }) [代码] [图片] 4，注册成功后，我们在云开发控制台的数据库里就可以看到注册信息了。 [图片] 二，注册成功后，就要实现登陆功能了 我们这里的登陆功能需要用到第一步注册时的用户名和密码，也就是上图数据库里的name和password字段 1，登陆页面实现代码 login.wxml [代码]<!--pages/login/login.wxml--> <input class='input' placeholder='请输入用户名' bindinput='inputName'></input> <input class='input' placeholder='请输入密码' bindinput='inputPassword'></input> <button class='button' type='primary' bindtap='login'>登陆</button> <button class='button' type='primary' bindtap='register'>去注册</button> [代码] 2,登陆功能实现 [代码]// pages/login/login.js let app = getApp(); // 获取数据库引用 const db = wx.cloud.database(); const userListDB = db.collection('userlist'); let name = null; let password = null; Page({ data: { }, //输入用户名 inputName(evnet) { console.log(evnet.detail.value) name = evnet.detail.value; }, //输入密码 inputPassword(evnet) { password = evnet.detail.value; }, //登陆 login() { let that = this; if (!app.checkNamePassword(name, password)) { return; } //登陆获取用户信息 userListDB.where({ _openid: app.globalData.openid }).get({ success: function(res) { let userInfos = res.data; console.log(res.data) if (userInfos && userInfos.length > 0) { let user = userInfos[0]; if (user.name !== name) { app.showTips('用户名不匹配'); } else if (user.password !== password) { app.showTips('密码不匹配'); } else { app.showTips('登陆成功'); let jsonStr=JSON.stringify(user); wx.navigateTo({ url: '../index/index?jsonStr=' + jsonStr, }) } } else { app.showTips('用户不存在'); } } }) }, register() { wx.navigateTo({ url: '../register/register', }) }, }) [代码] 3，登陆成功后显示用户信息 电话号码是胡乱填的，想联系我可以__加我微信2501902696__ [图片] 这样就可以实现小程序的登陆与注册了。 想要完整源码或者有小程序相关的问题，可以加我微信2501902696（备注小程序）

背景 半年前写过一个项目，在京东手机的小程序里内嵌老罗的锤子发布会的活动页。前几天老罗又发布了他的加湿器，而这份关于锤子项目的迟到的总结，经过这几天在全网搜索的相关问题来看，依然有必要写一下。 本文主要从 web-view 与 JSSDK 的实现来展开，顺带过一下 web-view 的基础，最后在文末发放一些实用的小糖豆。 ok，废话不多说，开始吧。 web-view 中可用的 JSSDK 接口 1. web-view 的本质 与 JSSDK 我们已知，web-view 是闭环的小程序对外开启的一扇窗户，是小程序承载网页链接的容器。web-view 就像小程序里内置的浏览器内核，可以运行网页，其实 web-view 本质即是微信的 WKWebview 的实现。 区别：小程序框架系统包括两部分，视图层和逻辑层，两者对应的技术实现分别是 webview 和 JSCore；web-view本质上就是一个浏览器，承载网页，包括视图和逻辑实现。 [图片] 微信Webview 不仅应用于小程序的 web-view，也应用于公众号等所有微信里可以打开网页的位置。 微信Webview 不仅集成了普通 webkit 引擎的基础功能，还注入了微信JSBridge（JS-SDK）相关的脚本，提供给开发者更多高效的能力，如：拍照、语音、位置基于手机系统的能力；扫一扫、微信分享、卡券、支付等微信个性化能力。 而基于微信Webview 的 web-view 组件，除开放承载页面的功能外，也被赋予了一些 JS-SDK 的使用能力，尽管有一定的限制，但整理来看也使 web-view 的能力变得强大了。 2. web-view 中可用的 JSSDK 接口 本文从两个维度介绍 JSSDK 的接口。只简单列举几个，更多可支持的接口还请查看web-view的文档。 [图片] 1） 可用的通用JSSDK接口 接口模块 接口说明 接口名称 判断客户端是否支持js checkJSApi 图像接口 拍照或上传 chooseImage 图像接口 预览图片 previewImage 图像接口 上传/下载图片 uploadImage/downloadImage 图像接口 获取本地图片 getLocalImgData 音频接口 开始/停止录音 startRecord/stopRecord 音频接口 播放/暂停/停止语音 playVoice/pauseVoice/stopVoice 地理位置 使用内置地图/获取地理位置 getLocation/openLocation 蓝牙接口 开启/关闭/监听 start/stopSearchBeacons/onSearchBeacons 扫码 微信扫一扫 scanQRCode 卡券 列表/添加/打开 chooseCard/addCard/openCard 长按 小程序圆形码 智能接口 识别音频 translateVoice 2）与小程序相关的接口 除通用的JSSDK接口外，web-view 还支持和小程序跳转相关的接口，比如：navigateTo、redirectTo、switchTab、navigateBack，类似这种。具体写法都是加上 wx.miniProgram. 这样。 此外，关于小程序和web-view 的通信需要请求：wx.miniProgram.postMessage 方法，小程序侧进行侦听即可，具体方法可参看公众号的另一篇文章。 3）这些接口的可用性？ 能够运行这些接口的最前提的条件就是，需要在小程序的环境里进行。那如何判断是否在小程序的环境里？ 有两种方法： wx.miniProgram.getEnv [代码]wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true }) [代码] window.__wxjs_environment [代码]console.log(window.__wxjs_environment === 'miniprogram') [代码] web-view 如何使用 JSSDK 接口？ 了解 web-view 可用的API 后，我们知道，在嵌入的H5 页面里，可以从相机里选择图片，或使用扫一扫的功能，那具体我们该如何实现呢？ [图片] 微信公众平台给出了详尽的 JS-SDK 的实现方法，我们这里将几个当年踩过的要点给出。 1）绑定域名。 首先需要登录相关联的公众号，嗯！你没有看错，确实是公众号，（有很多人吐槽此事，但这确实是目前的事实。）登录后进入“公众号设置”-“功能设置”，填写“JS接口安全域名”。 [图片] 这一行为，建立了网页域名和 appId 之间的绑定关系，即，该appId 下可以打开这几个域名白名单里的网页。 同web-view 的业务域名配置一样，也需要将生成的校验文件拷贝到域名指向的 web 服务器的目录下。 2）签名的实现。 [图片] 签名是进入下一步的必要条件，这部分交由后端实现，了解它会提升你们的联调能力。 第一步，获取微信网页授权，拿到access_token值。 接口： https请求方式: [代码]GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET [代码] 参数 是否必须 说明 grant_type 是 获取access_token填写client_credential appid 是 第三方用户唯一凭证 secret 是 第三方用户唯一凭证密钥，即appsecret 公众号和小程序均可以使用 AppID 和 AppSecret 调用本接口来获取access_token。 AppID和AppSecret可在“微信公众平台-开发-基本配置”页中获得（需要已经成为开发者，且帐号没有异常状态）。 需要设置IP白名单：登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中，点击查看设置方法，否则将无法调用成功。小程序无需配置IP白名单。 入口： [图片] 具体设置： [图片] 第二步，获得jsapi_ticket。 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）： [代码]https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi [代码] [代码]{ "errcode":0, "errmsg":"ok", "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", "expires_in":7200 } [代码] 第三步，生成签名。 初始字段：noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。 [代码]noncestr=Wm3WZYTPz0wzccnW jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg timestamp=1414587457 url=http://mp.weixin.qq.com?params=value [代码] 中间过程：对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串。 [代码]jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value [代码] 生成签名：对生成的字符串作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。 [代码]0f9de62fce790f9a083d5c99e95740ceb90c27ed [代码] 3）当前页面注入权限验证配置。 所有需要使用 JSSDK 的页面必须首先注入配置信息，否则无法调用 JSSDK 的 API。在2）中我们有生成的签名和生成签名依赖的时间戳和随机串，这些都是我们进行配置的必要入参。具体如下： [代码]wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: [] // 必填，需要使用的JS接口列表 }); [代码] 其中 apilist 是本页面里支持使用的 JSSDK 的 API，如果不声明，是不可以被调用使用的。 在下一步4）中会有一个实例。 4）万事俱备之后 config 接口是异步请求的，所以增加 ready 的接口来判定config 是否已经具备；同时，也提供了error 接口来实现 config 失败后的处理。 哈哈，以上基本就是 JSSDK 在小程序 web-view 里的打通实现，因为中间牵扯前后端的实现，看起来篇幅长且凌乱，不知道你还能不能看到这里呢？ 如果你是前端童鞋，先跟你报个喜，绑定域名和实现签名这些都不是你需要做的事情，把这些丢给你的后端童鞋，让他们来实现吧。但我还是提个醒，这些我们有必要知道，因为你在打通 web-view 和 JSSDK 时，可能无从下手。 5）一个例子帮你搞定 以下我们用一个例子，把前端方案的实现串起来，给大家一个直观的展示。 引入微信 JSSDK 库： [图片] 请求后端生成签名的接口，获取相关config依赖的字段： [图片] 在ready后，使用 wx.chooseImage() 选择本地相册的图片。 [图片] ok，到此为止，我们基本把 JSSDK 在 web-view 里的应用实现介绍完了。 总的来说，这是一个看起来比较简单，但实现起来可能有很多不可知问题的事情，我们当年苦于不了解需要在公众号下申请各种资源，不知道使用哪个 JSSDK 走了许多弯路，后来还踩过设置IP白名单的问题。这些都还是比较好解决的，本文也基本把这些很详尽的做了描述。在签名的实现中，还会有很多问题，还好我们当时也根据文档附录中的指点一一解除。 长征路漫漫，还好有分享~ 糖豆：web-view 在实际场景中的应用问题 [图片] 在这些和 web-view 相伴相生的日子里，也逐渐总结了一些问题，大致分为了几类，列举如下： 1. 开放能力的问题： 是否开放支付，是否支持直播，是否支持h5里添加分享按钮？ 答案否！ 插件禁用 webview 组件 个人账号可以测试，无法上线 小程序无法读取 web-view 的 cookie。 小程序不可以触发模板消息 类似以上问题，都可以归结为小程序的 web-view 对 JSSDK 的开放能力，须严格按微信的JSSDK提供的能力检查是否可行。 能否嵌套了其他的第三方网站的页面？答案：一切h5里引入的链接都需要加业务域名。 喜报：支持打开相关联公众号的文章！！ web-view 对外部网页的开放能力都是基于业务域名的白名单设置！ 感谢开放关联公众号的打开权限，运营小伙伴可以玩起来。 2. 白屏问题？ 紧接上文，强化一下业务域名配置问题。很多业务域名配置失败的直接症状就是白屏，然后给一句话，引用非业务域名。问题直接明了！那如何解决？ 1）优先查看业务配置是否ok，是否是https等。2）不能解决问题继续查看其他证书，如TSL版本。具体可查阅小程序HTTPS证书的约定。 3. 跳转问题。 首页是web-view 时没有回退按钮？层级过深时，回退过多？ 这个是经常被问到的问题，首页web-view 没有回退，官方没有给出很明确的说法；而非首页的 web-view 一旦路由跳转建立起来，web-view 里的路由就默认加入了路由栈中。有什么好办法解决？ 这个已跟小程序没关系了，唤醒你在浏览器里的处理吧。 4. 缓存、网页不刷新问题？ 这个也可以归结为浏览器里如何处理缓存的问题，类似浏览器网页中的缓存，可以通过时间戳。另外看看是不是你的CDN 缓存了内容？ 5. 分享问题？ 分享接口拿到的 webViewUrl 只是第一个 url，如果你的页面已经进入到它的子页面中，再次分享时，这时候你分享得到的 url 没有变化。这时候 你需要在子页面中使用 postMessage，捕获到当前页面的路径，传递给小程序。当用户触发分享时，只要读取消息队列最近的一条数据即可。 记得拼接参数时需要encodeURIComponent。 6 web-view 改宽高？ 不可以。默认铺满整屏。web-view 和 其他UI组件的关系是互斥的，并且小程序会优先选择展示 web-view。如果你想放多个web-view，很抱歉，它默认只展示第一个web-view 的内容，还会在控制台给个大大的报错。 7 web-view 提示“未绑定网页开发者”？ 没有开发该网页的权限！需要在公众号的开发者工具里绑定开发者微信号。 8 web-view 的校验文件是什么格式？ 官方回答：是一个含有普通字符串的txt文件，只是一个随机的字符串，与appid无关。放心使用~ 好啦~以上是对 web-view 常见问题的总结，总结不敢保证全对，另外一定是会过时的，所以，这只是你遇到问题的一个思考方向，具体方案还要请参看小程序官方文档。 如果你有更好的方案，欢迎回复我们，超级无敌感谢！ 最后，感谢你能够读到这里，也愿你不枉此行。 扩展阅读 [1] 微信JS-SDK说明文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 [2] 微信小程序开放能力-web-view https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 文章原载于公众号：全栈探索。

前提—— 由于云开发缺少后台管理，所以特别适合做用户输入内容的东西，不需要管理数据。但又由于个人开发者式微，太多东西无法通过审核，于是做了个打卡类小程序。 云开发数据库—— 我想如果我有10万用户，每天打卡，那一天不就是10万条数据，云开发的配额完全不够啊，于是……（完全没考虑到没用户） 一张表就行了，为了省数据空间，我甚至丧心病狂到把年月日当成键，这样就避免了year:2019这种字段每天打卡都出现一次，数据库设计如下[图片] 云开发记录—— 打卡的时候比较today字段，存在今天的日期则今天已经打卡，不存在则更新为今天的日期，并且将打卡记录插入进count字段。这样设计表方便在于读取日历类的时候，可以这样data[年][月][日]，然后遍历。当然，如果不是我有数据洁癖，最好的设计方案还是分成属性来一个个增加，这样方便读取。 效率—— 经常出问题，数据紊乱，不知道是不是由于云开发腾讯的问题，最后放出我的小程序，欢迎讨论打卡类小程序[图片]

废话不多说，开始 1.得到当前界面canvas。因为笔者用laya开发，所以介绍在laya中得到当前界面canvas的方法。 [代码]var canvas = Laya.stage.drawToCanvas(Laya.stage.width, Laya.stage.height, 0, 0).getCanvas(); [代码] 2.调用toTempFilePathSync方法将当前 Canvas 保存为一个临时文件。 [代码]var tempFilePath = canvas.toTempFilePathSync({ x: 0, y: 0, width: 100, height: 100, destWidth: 100, destHeight: 100, fileType: 'jpg', quality: 1.0 }); [代码] 参数详情可通过toTempFilePathSync了解。 3.此时，tempFilePath已经相当于一个图片链接(tips 若需分享，可以tempFilePath直接当做图片链接调用分享接口即可)。通过wx.authorize向用户发起保存图片授权。如果已经授权直接返回成功。 [代码]wx.authorize({ scope: 'scope.writePhotosAlbum',//这里表示相册权限 success: function (res) { //如果有授权过会直接返回成功，我们在这里就可以直接 调用保存图片的接口 Browser.window.wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success: function (res): void { Browser.window.wx.showToast({ title: "截图已保存至相册,快快分享到朋友圈吧", icon: "none", image: "", duration: 1500 }) }, fail: function (): void { } }); }, fail: function () { //没有授权过，我们调用showModal弹出弹窗，告诉用户请求给予我们授权。 var alertParam = { 'title': '微信授权', 'content': '保存到相册需要您的授权，请给予我们授权', 'showCancel': true, 'canelColor': '#666', 'confirmText': '去授权', 'confirmColor': '#666', success: function (ssa) { //打开设置界面，设置界面只会出现小程序已经向用户请求过的权限。我们请求过保存图片的权限，所以里面会有相册的按钮，允许后点返回。则执行下面的success方法。调用保存图片的接口 if (ssa.confirm == true) { wx.openSetting({ success: function () { Browser.window.wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success: function (res): void { Browser.window.wx.showToast({ title: "截图已保存至相册,快快分享到朋友圈吧", icon: "none", image: "", duration: 1500 }) }, fail: function (): void { } }); } }) } } }; //这里调用弹窗。 wx.showModal(alertParam); } }) [代码]

做了很多年的技术，走过很多路，就是懒得动笔头，今年开始放下脚步，拿起笔头要记录一下走过的路。这篇文章就从小程序写起，聊聊在做公司一个资讯平台（LifeAdd生活方式）小程序流量获取方式、开发过程、运营思路。 流量获取篇 说起小程序，从2017年正式发力，现在已经成为一个新的互联网入口形态，以至于大型互联网公司都开始抢滩小程序，阿里支付宝、今日头条都进入也说明小程序的能量不可小觑，虽然小程序不会完全替代本地化APP，但即用即走的方式对普通用户是极为方便的，毕竟每个人手机里不会乌七八糟的装上百个应用，做本地APP不仅仅开发成本维护高，更重要的是推广成本更好，一个有效IP用户已经上升到一二百的费用（去年做APP推广的一个广告公司老总聊天时说起的数），这让普通创业者是吃不消的，小程序的推广成本目前来说还是低很多，截至目前小程序获取流量的方式有： 1、公众号菜单入口 运营者可以将小程序连接到已经运营几年的公众号菜单中，如下图公众号菜单就是直接指向小程序的。 [图片] 2、微信搜索入口 在最新版微信中下滑微信聊天列表界面变成了全屏，这个改变其实腾讯是蛮有战略的，虽然只是展现上变成了全屏，但细思极恐，这俨然就是一个尚不太好看的系统桌面，说白点就是互联网操作系统桌面了，想要啥应用搜一下就来了，现在笔者也逐步习惯这种方式。 3、附近功能 附近是需要有实体店铺的，这个功能对有实体店的商户蛮有用，笔者不开实体店，也就用不上了。 4、群分享 群分享是所有小程序主用的最多的一种方式就不再多说了。 5、线下二维码扫描 小程序的出现对线下业务与互联网结合提供了极为方便的渠道，张贴二维码，用户扫码就可触达你的业务。 以上是主要的方式，基于微信超过11亿的用户，这个流量获取还是成本要低很多的。 开发经历篇 在小程序刚出来的时候就有朋友提议做小程序，并且那个时候提议的朋友立马组建了团队开始承接业务去做起了小程序，但那个时候考虑到新出的东西尚不完善，要经过很长时间的踩坑过程，会浪费不少的时间和精力，所以一拖二等三观望直到2018年下半年，此时的小程序已经完善了很多，虽然基础的像地图API很鸡肋，原生图层覆盖问题还存在，但大的需求已经基本上都能满足，于是着手开始对资讯平台进行升级改造，重新梳理业务，在移动版H5和小程序间选型做了一下抉择，最终选定做小程序。 既然做就先了解一下是否有现成的框架或组件，不能闭门造车，抬头看路少跳坑。 首先是微信公布的一个weui，传承微信风格，中规中矩，试着做了一个页面，还可以，不美也不错，但还是要再追求一下更好的体验，于是接着找到了下边这些开源项目： WussUI、MinUI、Vant、iViewUI、WuxUI、TaroUI、ECharts 这些组件就不一一介绍了，网上资料一大片，比对了一大圈，选择了WuxUI又进行了一下界面的设计，整体效果还是不错的，做了一些功能后，偶然的查阅资料发现了ColorUI这个开源项目，ColorUI由文晓港个人开发但却是非常的惊艳，于是加入了这个项目的交流群，那个时候作者开源的还是1.0版本，紧接着作者在很短的时候又提交了2.0版本，可以说在所有的小程序开源基础组件项目中ColorUI是最美的一套，于是马上在项目中引入了ColorUI，当时是从1.0开始引入的，后来出来2.0版本后，由于这个版本不向后兼容，所以只能独立引入，虽然有不向后兼容的不足，但毕竟作者是个人，已经相当的了不起，对想开发小程序的项目组还是非常推荐这套组件。 现在各类微信群都是屏蔽着的，但加入这个ColorUI交流群后至今还没有进行屏蔽，还又认识了一些做技术的好友，文后会对一些好友做的小程序做一个收录，大家可以借鉴学习。 运营篇 说到运营，这其实是个很大的话题，在此只抛砖引玉简要阐述一下自己的运营思路。 不管做什么样的小程序、网站、APP或其他形态的应用，最终是面向业务的，所以对业务的规划分析是第一要务，不要吝啬需求分析时间，这个环节功夫下到位了可以让后来少走很多弯路，一来可以降低开发成本，避免反反复复的修改带来的工作量，二来开头就得思路清晰，不能稀里糊涂的看见东家的某个功能好就抄过来，西家的赚钱了自己也搞一个，每个人本后的资源是不一样的，所以一定要立足于自身的现有资源来开发软件。在此多说一段话，项目做过软件的朋友都碰到过客户提的需求，不少客户都是一句我想做一个XX网站、XX小程序，很简单就是几个页面，能卖货就行，能……就行，然后就让当场报价，这种需求很粗犷，没有详细需求说明的，接下来项目就是坑，十有八九双方都不愉快，主要原因就是需求不细化，工作量估算不足，客户不明白软件只看到界面没看到界面背后有多少功能来支撑，说多了，回到运营上，其实运营最本质的还是输出价值，下边写一下笔者认为重要的几个点： 1、最简单的就是最有效的，集中一个细分领域去做，按行业、按地区、按专业都可以，只要是做到有一定量，资源会吸引资源。 2、要有好的内容，靠内容吸引流量，好的内容都是自带流量的，不用刻意的去推，被动送上门的和主动找上门来的是不一样的。 3、身边有一些朋友也经常问一个问题，刚开始客户内容啥都没有，该怎么起步啊，预先取之必先与之，刚开始没有就需求亲自去跑去找去建最基本的原始内容，比如笔者的“LifeAdd生活助手”小程序，刚开始要主动收录区域内的商户信息，到一个量就逐步会有客户陆续早上来，提供信息的渠道也会越来越多。 4、盯紧当前的主要流量入口平台，靠自己的办法引流。 5、平台如何变现也是大家关注的点，其实不同的业务平台变现方式都不一样，有流量广告是普遍的一个收入来源，如小程序中就有流量主，不用自己找广告，只要有1000人就可以开通流量主，每天多多少少都会赚到广告费，然后加上自己开发的广告，这是一个收入来源，其次是和商家的合作分成，或者直接销售产品，还有很多很多，大家多多交流摸索吧，条条大道通罗马，关键要上路。