JS零基础来搞微信小程序究竟有多难，结果狐友用VFP混成了

作者：火种

学习了加菲猫老师的小程序课程，打通了前后端的数据传输，我就跃跃欲试想做一个小程序了，是不是挺有野心⌒。⌒，但微信开发者工具的组件和api的知识我还基本是个零，没办法，只好一个个去填坑。

上网下载帮助代码和拿着别人的代码研究，看得一知半解晕头转向，不过努力没有白费，经过多次撞墙后，勉勉强强做出初步的界面。因此在这里分享一下我的几个填坑的路，希望能帮助和我一样的小白们少走弯路。

第一个坑怎样实现tabBar的界面切换效果。如下图实现新增、查询、设置三个界面的切换：

看帮助代码，比较复杂，经过抽丝剥茧，其实只需要一步：在app.json中加入如下代码即可：

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/new/new",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "新增"
      },
      {
        "pagePath": "pages/edit/edit",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "查询"
      },
      {
        "pagePath": "pages/setup/setup",
        "iconPath": "image/plugin.png",
        "selectedIconPath": "image/plugin_HL.png",
        "text": "设置"
      }
    ]
  },

第二个坑从登录界面如何带参数跳转到tabBar界面。 完成上面tabBar界面后，我又碰到了一个问题，登录界面怎么带参数跳转到tabBar界面，经过一波三折，也搞通了。我一开始用navigateTo

不行，没办法跳转，接着上网查了一下换成switchTab

可以跳转了，但参数没有传过去，tabBar页面没有收到参数，只好再次上网查，换成reLaunch

Ok，参数可以传了。

第三个坑怎么用滚动选择器实现街道社区选择。 街道社区的滚动选择的效果如下图：

查了一下滚动选择器picker的帮助，发现只有省市区的滚动选择，没有街道社区的。看来只能自已搞，也是上网下载代码研究，最后实现了，方法如下： wxml代码如下：

Js代码如下:

上面是滚动选择器的初始值，multArray数组中有两个数组，第一个数组是街道，第二数组是社区。multiIndex[0,0]数组表示显示multArray中第一个数组的第一个元素，和第二个数组的第一个元素。

将所有社区放入multiArray[1]数组中，因为Case1、case2。。。的代码和case0相似，都是表示当multiIndex数组第一个数变化时所对应的社区名，由于代码太长了无法截全图只好省略，依葫芦画瓢就可以。

好了，这样就可以了。 第四个坑如何选择多张图片并预览，效果如下图：

示例可以添加3张图片，点击“+”号添加图片，点击“ⅹ”号删除图片，点击图片就预览，预览时左右拉可以切换图片，点击“上传图片”按钮，调用中间层sqltest类的getupfile方法实现图片上传到云服务器。

WXML代码如下：

Js代码如下：

Wxss代码如下：

中间层sqltest类中的getupfile方法代码如下：

这样就搞定了。虽然说只有四个坑，却让我填了好几天，贴出来希望能让初学者少走弯路。