热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

伤不起的微信小程序

前段时间不是很忙,刚好公司需要开发一个微信小程序,于是我就入坑了(此坑还是有点深滴,请备好干粮)。我是一名iOS开发工程师,个人觉得入门开发小程序的话,需要基本的web前端知识,

前段时间不是很忙,刚好公司需要开发一个微信小程序,于是我就入坑了(此坑还是有点深滴,请备好干粮)。

我是一名iOS开发工程师,个人觉得入门开发小程序的话,需要基本的web前端知识,比如说:代码的书写格式,规范,标签以及样式的使用等,但作为一门如此新的开发语言,它也有自己的独特之处,就像我们的swift,融合了万家语言于一体,学好它就可以敲遍天下无敌手了(程序猿的毛病又犯了。。。)。它的外表看起来有点像传统的web开发,但它实质的开发思想又和我们的oc很像,比如它的 app.js、app.json、app.wxss 这三个全局文件的作用,还有数据绑定的开发模式。下面就说说自己的入坑经历吧,希望对大家有点点帮助。

先说一些大家上手小程序时都会问到的问题:

Q:小程序可以和现有的App 打通吗?
A:小程序可以借助微信联合登录,和开发者已有的App 后台的用户数据进行打通,但不会支持小程序和App 直接的跳转。
Q:微信已经有了订阅号、服务号、企业号,小程序和这三者有什么不同?
A:小程序、订阅号、服务号、企业号是并行的体系。
Q:小程序可以个人开发吗?
A:小程序允许个人开发,只是个人开发是不能发布的,并且想在真机上看到的话,在创建小程序时就得填上你申请好的appid。
Q:小程序需要付费吗?
A:个人是不需要的,公司的需要一个被认证过的微信服务号,不需再付额外的费用(需要注意小程序申请时名字及icon的确认)。

 

开始正题:重要的事情说n遍(认真看文档,仔细看文档,认真仔细看文档,虽然微信的官方文档写的不清不楚)。长度单位基本使用rpx(这是小程序特有的单位,可以理解为一个百分比),它是把屏幕宽分为750等份,所以我们在开发时,最好要求UI设计师提供750px宽度的图,然后在iPhone6上面开发。在这我们得注意一个点,模拟器上面的UI展示效果和真机上的有时还是有差别的,所以我们在模拟器上调试后好,一定要用不同真机看看效果,必要时可以根据不同机型稍作调整(苹果手机还好,如果是安卓手机,对于点点ui问题就没必要太纠结了。。。怕你会疯)。

生命周期的注意:下面图片里的两个数组,它们的作用域都是本页面,但是它们的生命周期是不同的。dataList1的生命周期同小程序的生命周期,也就意味着你每次退出页面时,要在onUnload: function () {}函数中使之置空,要不会有数据的叠加发生(对于像BOOL值的判断也需注意)。dataList2的生命周期同本页的生命周期,所以不需要手动管理。全局属性或函数,请在app.js里申明,配合var app = getApp()使用。

 

小程序现在的入口有:微信客户端-发现-小程序;个人或群里分享(不支持盆友圈分享);扫码进入。

我们主要看看后面两种方法的实现,分享主要调用onShareAppMessage函数,请看下面的截图。

 

 

扫码请仔细看文档(https://mp.weixin.qq.com/debug/wxadoc/introduction/qrcode.html#二维码跳转规则),

如何设置:后台-设置-开发设置-服务器域名-扫普通链接二维码打开小程序(如下图,左开发版,右线上版)

这里要特别注意两点:在我们的小程序未上线时,一次最多只支持5个链接的使用。在使用链接生成二维码之前,要先去后台-设置-开发设置-服务器域名-request合法域名里,配置好链接域名。如果你的链接是带参数的,那么一定要注意,生成二维码时参数也必须一样。当我们的小程序上线后,就没有这么多限制了,只需设置规则及功能页面就可以了,这也就意味着我们线上版生成的二维码里的参数可以随便改,达到扫不同的二维码,进入的界面里的数据都不一样的效果

好了,转发及二维码的生成我们都会了,现在来看看怎么在程序中怎么接收这些参数,然后去使用(看下图):

注意点:在onLoad函数中设置参数(options,自定义)接收,二维码链接内容会以参数q(只能用q去接收)形式带给页面,在onLoad事件中提取"q"参数并自行UrlDecode一次,即可获取原二维码的完整内容。

工具类的使用:常用的方法可以放在util.js里面,方便管理和使用。例如调用里面的网络请求方法:    

var request = require(\'../../../utils/util.js\');  

request.httpsGetRequest(url, dic, function (success) { });

module.exports = {
  formatTime: formatTime,
  getWindowWidth: getWindowWidth,
  getWindowHeight: getWindowHeight,
  showStyle: showStyle,
  useScanCode: useScanCode,
  httpsGetRequest: httpsGetRequest,
  httpsPostRequest: httpsPostRequest
}

function getWindowWidth() {
  var num = 0
  wx.getSystemInfo({
    success: function (res) {
      num = res.windowWidth
    }
  })
  return num;
}

function showStyle(title, content) {
  console.log(\'showStyle\')
  wx.showModal({
    title: title,
    content: content,
    success: function (res) {
      if (res.confirm) {
        console.log(\'用户点击确定\')
      } else {
        console.log(\'用户点击取消\')
      }
    }
  })

}

//GET请求
function httpsGetRequest(req_url, req_obj, res_func) {
  var jsOnUrl= {
    url: req_url,
    header: { "Content-Type": "application/json" },
    method: "GET",
    success: function (res) {
      typeof res_func == "function" && res_func(res.data);
    }
  }

  if (req_obj) {
    jsonUrl.data = req_obj;
  }

  wx.request(jsonUrl);
}

对于代码的管理及利用,我们也可以多使用模板(template),具体请参考(https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html)。

 

背景图(background-image:url(‘imageUrl’))的使用:可能刚开始是可以直接使用本地的图片的,但现在经过自己的测试,如果使用本地图片的话,必须先base64编码(http://base64.xpcha.com/indexie.php),然后把imageUrl换成你编码后的字符串,由于编码后的字符串不是一般的长,所以还是推荐使用网络图片作为背景图的资源。

 

分享到朋友圈:小程序虽然不能直接分享到朋友圈,但是并不是代表没有方法。既然我们可以通过扫码进入小程序,那也就意味着我们只要把二维码分享到朋友圈,别人长按识别后就可以达到目的了。但是我们如果只是转一个二维码在朋友圈的话,谁知道是什么内容,所以也就需要配些文字说明,个人感觉这样hen low,所以了,不如在二维码下加一个吸引人的背景图,并且在背景图上加以文字说明(作为一名程序猿,做了产品经理做的事,还给自己挖了个坑去实现。。。申明我不是处女座。。。)。想法很好,怎么去实现呢?

方法一:让后台生成二维码图片,包括合成背景图,然后我们下载再保存到相册,用的api有,wx.downloadFile======wx.saveImageToPhotosAlbum。

方法二:自己生成二维码并合成,需要用到canvas标签,至于合成图片,小程序是没有提供接口的,我们可以把要合成的背景图设为画布的背景图,这样就可以实现了。用的api有,

wx.canvasToTempFilePath======wx.saveImageToPhotosAlbum。难点是怎么画二维码,小程序没有提供接口,请参照:http://blog.csdn.net/sinat_17775997/article/details/53608479。

注意点:保存图片到相册需要用户的权限,所以需要处理好这块的逻辑,就像获取用户的基本信息一样;判断api是否可用,本人的微信版本6.5.6,在使用wx.saveImageToPhotosAlbum接口时就一直报错,后面才排查到是因为版本的问题。

其实对于小程序的推广,除了这几点,我们还可以使用公众号里的模版消息进行推送,具体请自己去看公帐号开发文档。还有,好像订阅号的文章里也可以写上小程序的链接进行推广,这个本人暂时没试过,如果有小伙伴验证了,记得评论告诉小哥哥。

 

如果要把小程序与公众号打通,则需前往微信开放平台,将这些公众号和应用绑定到一个开放平台账号下,绑定后,一个用户虽然对多个公众号和应用有多个不同的OpenID,但他对所有这些同一开放平台账号下的公众号和应用,它们的UnionID是一样的,这样就可以联通了。如下图:

 最后讲一下上线问题,上线时需要填一些相关信息,上面写的很严格(吓屎个把人),对于我们开发iOS的程序员来说,最怕的就是被拒-被拒-悲剧。。。实际是没那么严格的,比如功能页面及其说明,不怕,尽管填,拒了还是算你的。审核时间问题,第一次的话会久一点,两天左右,以后迭代就快了,5个小时左右(上班时间,其实晚上他们也有人审核的)。还有一点切记,切记!!!审核成功后你会收到微信的通知,但并没有自动上架更新,正式发布请自己登录后台发布,被坑了两次了。。。

 


推荐阅读
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 本文回顾了作者在求职阿里和腾讯实习生过程中,从最初的迷茫到最后成功获得Offer的心路历程。文中不仅分享了个人的面试经历,还提供了宝贵的面试准备建议和技巧。 ... [详细]
  • hlg_oj_1116_选美大赛这题是最长子序列,然后再求出路径就可以了。开始写的比较乱,用数组什么的,后来用了指针就好办了。现在把代码贴 ... [详细]
  • 本文详细探讨了在Java中如何将图像对象转换为文件和字节数组(Byte[])的技术。虽然网络上存在大量相关资料,但实际操作时仍需注意细节。本文通过使用JMSL 4.0库中的图表对象作为示例,提供了一种实用的方法。 ... [详细]
  • 如何将955万数据表的17秒SQL查询优化至300毫秒
    本文详细介绍了通过优化SQL查询策略,成功将一张包含955万条记录的财务流水表的查询时间从17秒缩短至300毫秒的方法。文章不仅提供了具体的SQL优化技巧,还深入探讨了背后的数据库原理。 ... [详细]
  • 深入探讨前端代码优化策略
    本文深入讨论了前端开发中代码优化的关键技术,包括JavaScript、HTML和CSS的优化方法,旨在提升网页加载速度和用户体验。 ... [详细]
  • 1.绑定htmlcss1.1对象语法:  传给v-bind:class一个对象,以动态地切换class   ... [详细]
  • 在Java开发中,保护代码安全是一个重要的课题。由于Java字节码容易被反编译,因此使用代码混淆工具如ProGuard变得尤为重要。本文将详细介绍如何使用ProGuard进行代码混淆,以及其基本原理和常见问题。 ... [详细]
  • c#  项目文件,C#viual studio使用方法
    一、项目文件1)Properties节点下主要存放的是当前程序集相关的信息,如版本号、标题等。双击”Properties“,打开如下项目属 ... [详细]
  • 本文通过一个具体的案例,展示了如何使用 Python 爬虫技术从京东网站爬取手机的价格和参数。最近发布的 iPhone X 虽然价格昂贵,但不妨碍我们探索其他高性价比的国产手机。 ... [详细]
  • 探索Web 2.0新概念:Widget
    尽管你可能尚未注意到Widget,但正如几年前对RSS的陌生一样,这一概念正逐渐走入大众视野。据美国某权威杂志预测,2007年将是Widget年。本文将详细介绍Widget的定义、功能及其未来发展趋势。 ... [详细]
  • 利用REM实现移动端布局的高效适配技巧
    在移动设备上实现高效布局适配时,使用rem单位已成为一种流行且有效的技术。本文将分享过去一年中使用rem进行布局适配的经验和心得。rem作为一种相对单位,能够根据根元素的字体大小动态调整,从而确保不同屏幕尺寸下的布局一致性。通过合理设置根元素的字体大小,开发者可以轻松实现响应式设计,提高用户体验。此外,文章还将探讨一些常见的问题和解决方案,帮助开发者更好地掌握这一技术。 ... [详细]
  • 在《Cocos2d-x学习笔记:基础概念解析与内存管理机制深入探讨》中,详细介绍了Cocos2d-x的基础概念,并深入分析了其内存管理机制。特别是针对Boost库引入的智能指针管理方法进行了详细的讲解,例如在处理鱼的运动过程中,可以通过编写自定义函数来动态计算角度变化,利用CallFunc回调机制实现高效的游戏逻辑控制。此外,文章还探讨了如何通过智能指针优化资源管理和避免内存泄漏,为开发者提供了实用的编程技巧和最佳实践。 ... [详细]
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
author-avatar
嘲笑讽刺伤
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有