这段时间通过官方文档，学了下微信小程序相关开发，整体感觉和vue还是比较像的，如果有vue相关经验，做小程序还是相对轻松点的，但是小程序也有很个性和需要注意的地方，写了个简单的demo遇到了一些比较基础和常见的问题，自己总结下。

1、backgroundColor设置颜色无效

当我们在小程序的json文件里设置backgroundColor时，回到页面看效果，发现页面并没有变化，是因为这个backgroundColor设置的是“上拉刷新”和“下拉加载更多”时露出的背景颜色，而不是通常意义上的页面背景色，如果要设置页面背景色，可以通过wxss设置。

2、组件template模板相关问题

（1）template模板引用

开发中我们肯定会用到父子组件嵌套问题，即将一个子组件引用到父组件中，通常可以这样写

//子组件ChildOne
<template name='childOne'>
  <text>我是子组件</text>
</template>

//子组件ChildTwo
<template name='childTwo'>
  <text>我是另一个子组件</text>
</template>

//父组件Parent
<import src="./childOne.wxml">
<import src="./childTwo.wxml">

<template is="childOne"></template>
<template is="childTwo"></template>

(2)模板样式的引用

样式的引用和模板类似，也是使用import方法

@import './childOne.wxss'

(3)数据和事件的传递

数据可以像vue一样，在引用位置传递data即可，可以同时传递多个值；

事件和方法可以直接在子组件调用（前提是模板引用按照上面方式引用）

数据传递：

//子组件ChildOne
<template name='childOne'>
  <text>{{childOne}}</text>
</template>

//子组件ChildTwo
<template name='childTwo'>
  <text>{{childTwo}}</text>
  <text>{{}childText}</text>
</template>

//父组件Parent
<import src="./childOne.wxml">
<import src="./childTwo.wxml">

<template is="childOne" data="{{childOne}}"></template>
<template is="childTwo" data="{{childTwo, childText}}"></template>

事件传递

//子组件ChildOne
<template name='childOne'>
  <text bindtap="changeTap">我是子组件</text>
</template>

//父组件Parent.wxml
<import src="./childOne.wxml">
<template is="childOne"></template>

//父组件parent.js
Page({
  changeTap(){
    console.log('click')
  }
})

(4)多层嵌套循环数据

开发过程中基本都会遇到数组循环遍历展示的问题，通过wx:for可以进行遍历。多层数组嵌套循环时也是这个原理，只是写法会有所不同，看代码~

<view wx:for="{{listArr}}" wx:for-index="idx" wx:key="item.id">
    <text>{{item.title}}</text>
    <view wx:for="{{listArr[idx].goods}}" wx:for-index="itemIdx" wx:for-item="good" wx:key="good.id">
        <text>{{good.text}}</text> 
    </view>
</view>

(5)template模板的小坑

这个坑我遇到是在template模板引用的时候出现的，这个坑跟个人平时书写有关系，看问题

...省略引入模板代码
<template is=" childOne"></template>

造成问题的原因很简单，就是在引入的模板名字前面习惯性的打了个空格，造成控制台警告或者报错，只要去掉空格就好了，这个问题可以修改代码书写习惯，或者更好方法使用代码格式化工具，比如prettier等，可以有效避免此类问题

3、调用接口出现地址错误问题

通常我们开发的时候肯定会调用相关接口获取数据，小程序也封装了统一的方法，和jq的方法很类似，具体可以查看文档。此处要说的是，在调用接口的时候出现了地址错误问题，仔细检查路径、书写都没有问题，小程序项目设置里也勾选了“不校验域名和https”的选项，问题就很诡异了~~

比如我们请求接口： “data.abc.com”

通常我们开发的时候不会写死协议内容，让接口自动获取是http还是https，使两者都可访问，但是在小程序里，即使本地开发也要加上协议，修改成 “http://data.abc.com”就可以了，当然大前提是要在小程序开发里配置好服务器域名。

4、scroll-view横向滚动

练习中遇到了顶部导航栏，需要横向滚动，自然可以使用scroll-view，但是写完之后发现效果完全不对。经过查阅文章发现，横向滚动需要注意这几点：

（1）容器盒子一定要有宽度，并且要设置white-space:nowrap

（2）盒子里的每一项要设置display:inline-block

（3）scroll-view需要设置scroll-x='true'

（4）动态绑定类名和选中状态： class="{{navCur==id ? 'activeNav' : 'navItem'}}"

（5）获取点击的index或者id，e.currentTarget.dataset.id

5、上拉加载更多导致数据过多页面卡顿问题

这个问题可以说在平时开发中很少遇到的问题，普通页面开发中，我们上拉加载更多数据就是对数组进行添加就可以，但是小程序里直接添加，数据过多的话会造成页面卡顿甚至直接卡死，相关方法网上也有很多了，直接贴两个地址供大家参考

小程序暗黑技巧彻底解决长列表页setData超过1M时报错和严重卡顿问题

微信小程序上拉加载更多数据

以上就是遇到的一些简单的问题，自己做个总结，也希望对有需要的人有所帮助~

初试微信小程序遇到问题总结