小程序开发经验总结

最近一直在做小程序，工作中也遇到了一些问题，踩了一些坑，所以想着写篇文章记录下来，并借此将小程序开发的相关知识进行梳理，方便以后参考，也为刚刚接触小程序的人提供一些思路方法，互相学习，共同进步。

1、微信小程序的目录结构及配置说明

app.json是小程序的全局配置文件，所有配置项key必须使用 双引号括起来 ，value值为字符串类型的也必须使用双引号， 不支持单引号 。

1.1 pages

pages选项是必须配置的。该配置项注册了小程序所有页面的地址，其中每一项都是页面的 路径+文件名 。每一个页面都是由.json、.js、.wxml、.wxss四个文件组成，并且 四个文件的名字必须要一致 。

1.2   tabBar

tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab

1.3 usingComponents

使用自定义组件或者插件提供的组件前，必须先在这里声明

2、开发微信小程序遇到的问题及解决办法

2.1 双向绑定

微信小程序不支持通过v-model的方式实现自动双向绑定，需要给表单元素通过绑定事件，并使用this.setData来赋值实现。

2.2 computed和watch

微信小程序默认是不支持computed和watch的，如需要使用这两项功能，需要安装miniprogram-computed ，安装方法见 官方文档

2.3 对象赋值

如果给对象的属性赋值，可以使用this.setData({'obj.key':value})来赋值，但是如果给某个属性名是变量的属性赋值，通过这种方法是会报错的，经过多次尝试，发现使用如下的方式赋值成功。

let newObj = `obj.${key}`

this.setData({

[newObj]: value

})

2.4 scroll-view

当页面存在d框容器，并且d框里的内容是需要滚动条滚动展示时，如果d框下面那层的容器使用view元素的话，会导致滚动d框内容时，同时会触发d框下面那层的页面容器也会一起滚动，解决此问题可以将d框下面的容器使用scroll-view元素替代view元素

3、小程序测试和发布

由于服务器域名request合法域名每个月 只能修改5次 ，因此在本地开发小程序时，需要在微信调试工具中设置不校验合法域名。等小程序上线前再一次性将所有域名添加到小程序管理后台。

以上便是此次小程序开发中积累的一些经验，希望能给刚刚接触小程序的人提供一些思路方法，在以后的开发中，如果遇到新的问题，继续更新文档......

"list":[

{

"text": "菜单1",

"pagePath":"pages/index/index",

"iconPath":"xxx/icon.png"

},

{

"text": "菜单2",

"pagePath": "pages/addCgi/addCgi",

"iconPath":"xxx/icon2.png"

}

],

说明：微信小程序tabBar配置项里的list接受一个数组，只能配置最少2个、最多5个 tab。tab 按数组的顺序排序，每个项都是一个对象。

---