小程序——微信小程序初学踩过的坑

时间 2019-12-01

标签程序微信初学繁體版

原文原文链接

微信小程序初学踩过的坑web

1、前言json

最近由于某些须要和我的兴趣打算开发一下微信小程序，通过在官方网站上的基本了解，我大致知道了微信小程序开发的大体过程，其实最本质的就是MVVM，借用了不少模式上的HTML+CSS+JS来进行开发和呈现，其中HTML主要是负责静态内容的表示，经过DOM树状结构来维护，CSS主要是对这些描述对象的一种解释，提取出来能够复用，JS则是实现试视图和逻辑的交互，经过用户等各类动做来执行相应的操做，而微信就高度的使用了这些东西，分别变成了WXML,WXSS,JS，知道了这些基本的概念以后就是微信的整个工程文件结构的组织问题了，微信在这一块也作得不错，基本上将一些主要的东西抽取出来，好比app.js在加载的时候实现初始化的做用，对一些全局变量抽取出来直接初始化，这些操做只执行一次，很相似于Android上面的结构，其次就是对一些相关的设置进行了规范，把这些东西放到了app.json中。一样的出现了js文件基本上都会有wxss文件来进行描述，还有一些工程的基本配置信息放在了project.config.json之中。以后又规范了一些基本的页面和文件夹分类来存储不一样的东西，好比pages页面之下就是咱们的页面信息、相应数据的提取json、页面描述和页面的操做，这样咱们的业务就比较清晰了。但是微信之中也有一些坑，在这里我须要记录下来供你们和我来参考。小程序

2、微信小程序目录的组织微信小程序

2.一、建立一个小程序api

2.二、开发工具的了解浏览器

咱们能够看到有三个选择的按钮（1,2,3）主要是用来进行模拟和编辑视图的切换、编辑和调试的切换、调试模式的切换而存在的，通欧这些简单的设置，咱们能够容易的进行代码的编写，调试和检查错误。而在咱们编译的时候（4），最好使用普通编译，否则会出现一些本身不认识的文件夹，对本身形成很大的困扰，而后就是编译和预览了（5,6），编译的时候最好打开模拟器这样就能看到程序运行的过程了。预览的时候系统会生成二维码，能够在必定时间以内供咱们使用手机来进行测试，这样很是方便。而有的时候咱们在模拟器上不当心点了某个按钮出现了后台列表，这个时候咱们可使用切后台（7）按钮来进行转换，而清缓存按钮可让咱们释放一些空间，除去一些错误的东西。缓存

2.三、文件结构分析服务器

咱们能够看到系统默认为给咱们分了一些目录，在这些目录中，咱们能够进行相应的编辑，首先是我刚刚说过的那些全局目录，咱们能够在官网上进行学习。其次就是pages这个最重要的开发目录了，咱们的全部逻辑都要放在里面，里面默认分了index首页目录和logs日志目录。另外还有一个工具目录，这也是常识了，能够方便的进行访问。根据咱们的须要咱们还可能在外面在创造资源目录，好比images等等，而且在pages里面咱们还能够创造本身目录来完成相应的操做。微信

3、微信小程序常见问题微信开发

在这一部分我会常常更新的，主要记录一些容易出错的地方。

3.一、文件路径在某个文件中找不到

在开发中咱们可能在一个文件（films.wxml）中引用其余文件（film-grid-template.wxml）的内容，这是合法的，是高内聚低耦合的必然结果，但是有的时候当咱们使用下面的语句的时候，咱们的路径和其余的内容都是彻底合法的，但是一直提示出错了，这点让我百思不得其解，在网上搜到的都是一些很简单的东西，根本没有用，因而我费了好长时间才发现将提示的文件删除了以后再从新建立就能够了，这应该是微信开发者工具中的一个bug了，在某个特定的场合中出现了，很是的让人恼火。

但是随之而来的又出现了另外一个问题，我打算在更上层次的目录中去引用这两个模板，因而我使用了和上面相似的引用，各个方面都是没有问题的，但是就是一直提示引用失败，没有从我引用的wxml文件中找到被引用的模板文件，最后浪费了我几个小时的时间，实在是差不出问题之所在，后来我一气之下，又新建了一个工程，从新测试一下，此次不管我怎么测试，不管我在哪一个文件夹中由于模板文件，只要路径是正确的都没有问题，我以为这是微信小程序的一个重大的bug，形成的缘由多是我建立出了相似文件名或者相同文件名的文件，而后由于某种缘由被我删除了，以后我再次这样建立，就会产生问题了，由于被咱们删除的文件其实不是真删除，而是保留了一份副本放在了某个地方，咱们还能够恢复的，这样就不知道出现了这个问题了。

下面的是我对于第一个问题作的尝试：

1 <import src="films-list/films-list-template.wxml" />
2 <import src="films-grid/films-grid-template.wxml" />

具体的内容以下：

films.wxml：

<import src="films-list/films-list-template.wxml" />
<import src="films-grid/films-grid-template.wxml" />
<view class="search">
  <icon type="search" class="search-img" size="13" color="#405f80"></icon>
  <input type="text" placeholder="输入演员或片名" 
  placeholder-class="placeholder" bindfocus="onBindFocus"
  bindblur="onBindBlur" value='{{searchText}}'/>
  <image wx:if="{{searchPanelShow}}" src="/images/icon/film_search.png" class="film_search_img"  bindtap="onCancelImgTap"></image>
</view>
<view class="container" wx:if="{{containerShow}}">
  <view class="films-template">
    <template is="filmListTemplate" data="{{...inTheaters}}" />
  </view>
  <view class="films-template">
    <template is="filmListTemplate" data="{{...comingSoon}}" />
  </view>
  <view class="films-template">
    <template is="filmListTemplate" data="{{...top250}}"/>
  </view>
</view>
<!-- 点搜索框时显示，使用grid模板存放搜索结果 -->
<view class="search-panel" wx:if="{{searchPanelShow}}">
    <template is="filmGridTemplate" data="{{...searchResult}}"/>
</view>

film-grid-template.wxml:

<import src="../film/film-template.wxml" />
<template name="filmGridTemplate">
  <view class="grid-container">
    <block wx:for="{{films}}" wx:for-item="film" wx:key="index">
      <view class="single-view-container">
        <template is="filmTemplate" data="{{...film}}" />
      </view>
    </block>
  </view>
</template>

film-list-template.wxml:

 1 <import src="../film/film-template.wxml" />
 2 <template name="filmListTemplate">
 3   <view class="film-list-container">
 4     <view class="inner-container">
 5       <view class="film-head">
 6         <text class="slogan">{{categoryTitle}}</text>
 7         <view catchtap="onMoreTap" class="more" data-category="{{categoryTitle}}">
 8           <text class="more-text">更多</text>
 9           <image class="more-img" src="/images/icon/arrow-right.png"></image>
10         </view>
11       </view>
12 
13       <view class="films-container">
14         <scroll-view scroll-x style="width: 100%">
15           <block wx:for="{{films}}" wx:for-item="film" wx:key="key">
16             <template is="filmTemplate" data="{{...film}}" />
17           </block>
18         </scroll-view>
19       </view>
20     </view>
21   </view>
22 </template>

3.二、使用微信本身封装的wx.request()方法的时候不能联网

 1     wx.request({
 2       url: url,
 3       method: 'GET',
 4       header: {
 5         "Content-Type": "json"
 6       },
 7       success: function (res) {
 8         wx.showToast({
 9           title: '成功',
10           icon: 'success',
11           duration: 1000,
12           mask: true
13         })
14         that.processDoubanData(res.data, settedKey, categoryTitle)
15       },
16       fail: function (error) {
17         wx.showToast({
18           title: '失败',
19           icon: 'loading',
20           duration: 10000,
21           mask: true
22         })
23         console.log(error)
24       }
25     })

这个问题困扰了很长时间，通过一步步的排错总算是定位到了这个问题，这个问题的本质是调用豆瓣官方API中给的数据来进行处理，因而访问了相关的连接，为了测试连接是否可行，我还在火狐浏览器中进行了实验，一点问题都没有，彻底能够访问到相应的数据，但是在该函数中就是没有一点反应，想了不少办法，经过上面程序的toast，我看到程序走向了fail方法体中，我就知道确定没有得到数据，但是没有道理呀！！！

因而我打开了监视器，我看到程序执行到这里根本就没有发送任何请求，感情真的是没有发送请求呀，那又怎么会成功呢？！因而我在网上搜了不少缘由，最后总算是定位到了，在使用微信提供的这个方法的时候必定要注意注册并配置域名服务器，其实这个设定是合理的，由于咱们的小程序发布了，确定是须要服务器资源的，但是我如今还在开发阶段呀，只是想测试一下程序是否是可行的，因而我又搜了不少的东西，最后总算发现，原来在微信开发者工具中咱们能够设定在运行wx.request()方法的时候是否是须要进行域名的审查和一些其余的操做，到了这里我总算豁然开朗了，因而进行了设置，果真能够成功访问网页了。

免域名测试实验：

咱们在微信开发者工具中，点击“详情”就能够看到在最下面有一个项目设置，在这里咱们将最后一个选项勾起来，“不校验合法域名、web-view业务域名、TLS版本以及HTTPS证书”，这样咱们就能够正常访问外部服务器了，这点是微信最坑爹的地方，特别是对于初学者，这是很是打击人的，为了让你们购买腾讯云的域名吧，才会出此下策，按理说应该替咱们勾选起来的！！！！！！

下面是正常的状态：

3.三、wx.request()方法访问豆瓣API的时候出现403错误

这个错误是随着时间变迁的，在之前豆瓣开放了https://api.douban.com这个接口，可让咱们访问电影数据，但是由于访问的人数很是多，豆瓣作了必定的限制，咱们经过浏览器仍是能够继续访问的，但是若是使用微信的wx.request()方法却无能为力了，会报403错误，一种方法是咱们使用代理服务器，模拟成浏览器（人）去访问，另外一种办法就是咱们只能另寻他途了，不过好在我在网上找到了两个这样的代理或者数据源吧，经过这两个数据源，咱们能够经过相应的参数去访问豆瓣的资源，很是的方便，可是也是有使用的次数的，只能供咱们学习的时候使用吧。

1 http://t.yushu.im 2 https://douban.uieee.com

上面就是这两个珍贵的数据源，亲测在（2018/5/9）还可使用的，之后怎么样就不知道了。咱们在这两个网址后面加入必定的参数就能够访问了等因而彻底替代了之前豆瓣的网址，不过数据的格式可能有所不一样。

1 http://t.yushu.im/v2/movie/in_theaters?start=0&count=6 2 https://douban.uieee.com/v2/movie/in_theaters?start=0&count=6

截图以下：

4、总结

经过对小程序的认识和实践，我发现开发工具在某种程度上仍是有待进步的，好比说断点调试、那些莫名的找不到文件而实际文件却存在错误、智能提示等等，固然了做为微信本身开发的工具整体来讲仍是不错的，这种创新，这种造轮子原本就是值得佩服的！这个解耦方法