`
sodler
  • 浏览: 14688 次
  • 性别: Icon_minigender_1
文章分类
社区版块
存档分类
最新评论

微信小程序

阅读更多

      怎么说呢,本菜终于成功做出来了一个微信小程序,虽然只有前台的部分,但是依然很爽啊!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!这是前台s和后台z共同的成果啊!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!好爽啊!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

 

玩笑结束,由于之前的文件全部丢失所以本菜虽然是中途接手对原本存在的小程序进行添加功能的操作,还是只能全部恢复之后再添加功能了,恢复加添加全程经历了一个多星期(幸好本菜还能用初次接手的理由安慰一下自己)

与原本的H5不同的地方在于。。。它是微信小程序。。?!

微信小程序使用 view 代替了html中的 div ,这种说法也不正确,div 正如其名是一个块,而view是一个视图,采用数据绑定的方法可以直接将对应的 js 文件中初始定义的数据展示,其实微信小程序的开发确实很简单,官方文档就能解决很多问题,同时它也有一套样式 weui 里面有一些很方便实用的样式,但是这些之外重点需要理清的还是自己的开发逻辑,本菜在过程中发现了一个很好玩的要点,即是微信小程序视图层的条件渲染机制,将这个机制应用在 view 标签上,可以显示对应的视图块,同一 wxml 文件中哪怕有很多个块都没问题,而且它的不显示是类似于css display: none 的不占空间类型,所以甚至可以只用一个 wxml 文件就把一个小程序的所有页面全部完成,当然本菜没有这么做,本菜在 html 中同样想过使用 jquery + css 实现同一个页面中通过点击按钮对不同的div进行展示,当然目前还没成功,而小程序中的 wx:for 列表渲染会对列表中的每一项都渲染展示,部分情况两者配合使用无法达到预期中的现实列表中部分内容的目的,两者间可能不存在联系,只能通过调用 item 或者 index 之类变量名达成合作的目的,虽然都是自己写出来的代码,但是其中一部分成功展现出来的时候,我自己都觉得不可思议(这是什么逻辑?怎么出来的这个页面?为什么它能成功展示?)

言归正传,本菜在这个过程中,唯一遇到的难题就在于最后上级要求更改 icon 的时候了,从阿里巴巴矢量图标库(http://www.iconfont.cn/)上下载来了图标,但是极端排外的微信小程序不允许使用(闭关锁程么?赶紧改革开放啊),于是乎谷歌解决办法,无果(所有的博客中一部分是复制粘贴的官方文档,看文档能解决的事用得着你们再粘贴一遍啊!!!一部分复制粘贴的某人写的《在某网站进行 base64 转码之后写入 wxss 文件可以达成引用》但是那个网站(忘记名字也懒得再找)总是给本菜报错还不明确点显示是哪里的错误,本菜只能换了一个网页进行转码工作,但是他所介绍的引用方法还出了错,于是本菜毅然地在:1.自己写一个转码程序,2.发掘新的引用方法,这两个选项中选择了直接将 icon <image> 的形式展示出来的方法(微信小程序引用图片使用的组件是 image 但是路径的设置不够巧妙的话,在手机上将无法显示引用的图片,但是电脑端能够正常显示),而且 base64 转码的办法各处都可以使用,但是用在小程序上就会增加原本的编译包大小,然后小程序运行就会变慢。。得不偿失.

另外小程序需要的是自动登录,即是说登陆过一次之后不需要用户名和密码就能再次登陆,我还是觉得这样一来用户名和密码就没那么必要了除了调取每个用户各自的数据信息之外,没什么用了并且因为需要 token 验证,在自动登录的时候也需要请求一次 token(而不是验证),并且手机很私人入了,真的发生丢失的意外,也不会只顾小程序了。

 

另外,最重要的一点就是,微信小程序中 ios 和安卓有一个巨大的不同,就是关于初始化的函数,安卓会调用,但是 ios 不会调用,所以安卓上能用 onloadonlaunch 函数的逻辑,iOS上只能使用 onshow 函数,还有一点当调用 app.js 的在一种情况下,就是调用了扫码 API 之后,扫完码,返回小程序时会调用 onshow 函数,所以上面的自动登录逻辑,应该参与到其它文件的 onshow 中,onload 函数iOS不理睬,谁能我为啥?(答案内容请在两个字以上)

 

 

然后经再次测试后发现,ios还是会调用 onload 的,下拉刷新的时候能够调用成功,但是当刚进入某个页面,就使用 onload 函数调用 扫码接口的时候,无法实现。为自己的不严谨和脑残而羞愧

 

 

 

 

 

ps:因为其中发现问题后对原文有所修改,可能有点乱

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics