微信小程序tips

最近公司项目改版,趁产品修改与UI出图的间歇用公司商户端UI图撸了一把微信小程序。因为刚刚实习那一会接触过前端开发,所以上手还比较快,当然也遇到了很多的问题,不过好在基本按图完成。趁此总结一下我遇到的问题,奉上一些可行的解决方案,希望可以帮助与我遇到相同问题的朋友。demo

1、先上图
微信小程序
2、tips

1.背景图片不能使用本地的

这个问题坑了我很久,因为在模拟器上跑时,将本地图片作为View的背景图片是可以的,但是一到真机测试就不显示背景图片了,一开始还以为是路径错了,经过测试发现路径是没有问题的,最后在网上找到了原因:微信小程序的背景图片不能是本地图片,必须是是网络图片,于是我就找了一个网站将图片传了上去,将网址作为背景图片链接,就奇迹般的显示了,很是无语。

2.不能加载网页

微信小程序是不能跳转到网页的,也许是因为微信小程序本身就如同网页吧,也可能是微信不想有人越过它的审核,反正他是不允许直接加载网页的。

3.不能隐藏导航栏

我的登陆页面本来是不应该有导航栏的,可是就是隐藏不了,也许有方法,但是我找了很久也没有发现。

4.只支持HTTPS的网络协议并且一个月只能修改5次

在微信小程序中网络请求只能是https类型的。在添加URL的时候都已经限制死了。并且一个月只能修改5次,网络请求必须先进行服务器域名配置。


添加URL

)

5.所有的页面都必须在app.json中配置路径

我之前新建一个页面然后跳转过去一直报路径错误,去网上查询才知道,每一个页面路径都需要提前配置。


页面路径配置

6.网络请求的最大并发数为5、页面层级最多5层

就是说同时最多5个网络请求,页面的子页面最多4个。我在想要是一个页面是一个视频列表展示怎么办,每一个视频都需要网络请求啊。

以上就是这次遇到的一些比较变态的问题。

3、谈谈我的一些代码实现

1.配置tabBar(app.json)

  "tabBar": {
    "color": "#888888",
    "selectedColor": "#09BB07",
    "backgroundColor": "",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/orderManage/orderManage",
        "text": "订单管理",
        "iconPath": "pages/images/order.png",
        "selectedIconPath": "pages/images/order_r.png"
      },
      {
        "pagePath": "pages/moneyManage/moneyManage",
        "text": "财务管理",
        "iconPath": "pages/images/money.png",
        "selectedIconPath": "pages/images/money_r.png"
      },
      {
        "pagePath": "pages/myself/myself",
        "text": "我的商户",
        "iconPath": "pages/images/people.png",
        "selectedIconPath": "pages/images/people_r.png"
      }
      ]
  }
  

2.订单管理页的菜单栏
点击菜单栏切换View简单,直接将将点击的菜单的值赋给View让其偏移对应的百分比就好。
手势切换:通过触摸的起点与终点计算出滑动方向,然后偏移并且切换菜单栏。

  catchtouchstart:function(e){
  var that = this;
  that.setData({
    startPoint: [e.touches[0].clientX,e.touches[0].clientY]
  })
},

catchtouchend:function(e){
  var that = this;
  var currentNum = parseInt(this.data.currentNavtab);
  var endPoint = [e.changedTouches[0].clientX,e.changedTouches[0].clientY];
  var startPoint = that.data.startPoint
  if(endPoint[0] <= startPoint[0]) {
    if(Math.abs(endPoint[0] - startPoint[0]) >= Math.abs(endPoint[1] - startPoint[1]) && currentNum< this.data.navTab.length -1) {
       currentNum=currentNum + 1;  
    }
  }else {
    if(Math.abs(endPoint[0] - startPoint[0]) >= Math.abs(endPoint[1] - startPoint[1]) && currentNum > 0) {
        currentNum -= 1;
    }
  }

  this.setData({
    currentNavtab: currentNum
  });
},
// 点击菜单栏切换View
switchTab: function(e){
  this.setData({
    currentNavtab: e.currentTarget.dataset.idx
  });
}
4、结束

整个程序还是很简单的,就是初次写还是有些不适应。尤其是把div改为了View,不能使用window对象和document对象,很不适应。再次奉上demo

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 164,105评论 24 696
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 8,731评论 4 47
  • 当你费尽心思要让所有人对你满意的那一瞬间,你就被束缚在一个框架内,你会忘记那个框架是随机的环境,你会以为,那是应该...
    每日读报时间_幕僚阅读 61评论 0 0
  • 我爱你,你把此当资本 却见N一身黑色纯手工西装,捧着娇艳欲滴的玫瑰,满脸的欢心喜乐,仿佛是灼灼日光,旁人黯然失色。...
    老字002582阅读 157评论 1 0
  • 今天看了两个关于时间价值的小故事,详见附录。 第一个故事,是讲时间对于人的价值。不同的人拥有同样的时间,但价值是不...
    艳翎阅读 301评论 0 1
  • 职场:无论是你是销售小白还是销售老油条,都要学会分析在销售过程中遇到的主要问题。把这些问题穿起来就是你的销售套路,...
    文白日记阅读 198评论 0 4