记录开发过程中一些知识点，还有遇到的有意思的bug，以及最后项目地址。
微信开发者工具的目录
utils存放js文件去实现小程序的功能（存放公共脚本文件），pages存放小程序的页面文件。
后面的五个称其为小程序的应用配置或者说全局配置。
2.1app.js是根目录js，所有页面都可以去取里面的js方法。
2.2app.json在小程序里不把它当作数据格式，而是配置项文件。因此这是个全局配置项文件。
2.3app.wxss理解为微信css，存放全局样式。
2.4project.config.js用于描述项目配置的参数。比如小程序使用的仓库的版本，你这个项目在用微信开发者工具时的外观配置。
2.5sitemap.json搜索文件，配置你的哪些页面可以去搜索。点击这个文件夹，打开链接会有更多解释
pages下一个文件是一个页面，且一个页面含四个同名的文件。wxml和js文件必须存在，其中wxml文件类似与html标签。
微信小程序开发必备知识点
从json、wxml、wxss、js四个方面总结一下小程序开发工程中的基础知识点。
一、页面组件（WXML）
WeiXin Markup Language
1.<view>标签用于定义视图容器与<div>类似。
2.<text>文本标签，行内元素类似span。可以嵌套一个<text>比如一段文本中某些字体颜色要变。1.也可以写入文本但是它没有换行效果。
3.<input>输入框。input组件显示为空白，因为默认样式没有边框，单击input组件光标闪烁即可输入。它有四个属性，默认text输入的是文本，弹出标准键盘。<input type="number"/>表示在单击输入框时下方弹出输入数字的键盘。
| 其他三个属性 | 对应的效果 |
|---|---|
| idcard | 身份证输入键盘 |
| number | 数字输入键盘 |
| digit | 带小数点的数字键盘 |
4.swiper滑块视图容器，主要用于轮播图。默认大小：宽度100% 高度是150px 需要自定义设置大小。其中只可放置swiper-item组件。属性详情参见开发者文档
5.scroll-view:可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
6.icon:图标。组件属性的长度单位默认为px。<icon type="success" size="93"></icon>即是一个绿底白勾的圆形通过符号。更多type
7.progress:进度条，更多可参考开发者文档。组件属性的长度单位默认为px。<progress percent="20" show-info stroke-width="3"/>
8.
9.<button>按钮</button>button属于表单组件
<button size ="mini" type='primary'>按钮</button>type属性在开发者文档里解释为颜色
<button open-type="share">转发按钮</button>open-type属性是指微信开放能力，包括转发、获取用户信息、获取手机号、打开app之类的。
10.导航
navigator：页面链接 页面跳转 <navigator url='页面路径'></navigator>
open-type属性 的合法值有如下：
（1）navigate:默认跳转方式。保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
（2）redirect:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
（3）switchTab:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
（4）reLaunch:关闭所有页面，打开到应用内的某个页面。
（5）navigateBack:关闭当前页面，返回上一页面。
（6）exit:退出小程序，同时在标签里加上target=”miniProgram”时生效。
二、小程序配置（json）
1. 全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
详细配置文档
1.pages页面路径
2.window窗口：用于设置小程序的状态栏、导航条、标题、窗口背景色。文档挺详细的不赘述。（window的background是要下拉才能看见的颜色。）
3.style：微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 “style”: “v2”可表明启用新版的组件样式。
4.tabBar配置:窗口的底部或顶部有 tab 栏可以切换页面。
如图:
2. 页面配置
直接就用{}在json文件里写属性和值就是了，全局配置的window里面的属性都包含(此时不用写”window“:{}直接{}写属性)。比较常用的时pages页面路径那张图的windows组件花括号里的几个。
json里面不能写注释
json还不能调用云开发的图片
3. sitemap 配置
用的不多看文档吧。
三、小程序配置（WXSS）
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比，WXSS 扩展的特性有：
尺寸单位
rpx（responsive pixel响应式像素 ）: 移动端网页像素单位的换算难点在于它有物理像素和逻辑像素两种单位。物理像素是指屏幕实际上有多少个像素，而逻辑像素是指CSS中使用的像素单位。为了方便开发人员适配各种手机屏幕，微信小程序在wxss中加入了新的尺寸单位rpx。为了方便换算rpx单位，规定任何手机屏幕宽度为750rpx。
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
四、逻辑层（js）
1. 啥是逻辑层？
整个小程序的框架分为逻辑层（JavaScript）和渲染层（视图层(wxml,wxss)）。逻辑层用来处理数据，渲染层再把数据显示在界面上。小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。
2. app.js的App方法
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，他接受一个参数，通过参数指定生命周期回调、错误监听和页面不存在监听等。若要在小程序启动、显示、隐藏时执行某些操作，可以通过App()函数来实现。App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。 可以通过getApp方法获取全局唯一App实列，获取App上的数据或调用App上的函数。app.js里·还有一个全局变量globalData:{}
3. pages.js页面逻辑
对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册。内容包括：
- data变量指定页面的初始数据
- 生命周期(从创建到销毁)回调函数，小程序自动创建
- 自定义函数
- 事件处理函数等
4. 数据绑定
WXML 中的动态数据均来自对应 Page 的 data。数据绑定就是把data里的数据放到wxml上。
先在js里写上
然后wxml上写Page({ data: { message: 'Mustache', id:0 }})
<view> {{ message }} </view>
<view id="item-{{id}}"> </view>页面显示就是：
Mustache
5. 列表渲染(循环)
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
wxml里：
<view wx:for="{{array}}">
{{index}}: {{item}}</view>js文件里：
Page({
data: {
array: [
'这个博主',
'真的帅']
}})
多重循环的时候还需要用到一点：
使用 wx:for-item 可以指定数组当前元素的变量名，
wx:for 也可以嵌套，下边是一个九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>没完，还有个快捷用法将 wx:for 用在
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view></block>6. 条件渲染(if)
wx:if=”” 判断是否需要渲染该代码块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>这里也可以用block控制多个标签。
7. 事件绑定
在组件中绑定一个事件处理函数。
最常用的bindtap，当用户点击该组件的时候会在该页面对应的js文件里的Page中找到相应的事件处理函数。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>在相应的Page定义中写上相应的事件处理函数，参数是e。
Page({
tapName: function(e) {
console.log(e)
}})微信navigator标签导致css样式改变
项目场景：
在写一个校园失物招领和二手交易的平台，然后写好了静态的分类栏，在转变成动态的时候加了一个navigator标签，结果我的分类栏乱起八糟
问题描述：
这是我的wxml的代码
<view class="kinds">
<block wx:for="{{kindArr}}" wx:key="_id">
<view class="kind_item">
<navigator hover-class="none" url="../kinds/kinds?name={{item.name}}">
<image src="{{item.src}}"></image>
<text>{{item.name}}</text>
</navigator>
</view>
</block>
</view>加入标签后就变这个模样了
正常该有的样子：
原因分析：
注释掉的部分是我原先的wxss代码：
.kinds{
/* width: 100%;
height: 400rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 20rpx; */
display: flex;
padding-top: 20rpx;
flex-wrap: wrap;
}
.kind_item{
/* display: flex;
flex-direction: column;
width: 20%;
align-self: center;
align-items: center;
justify-content: center; */
width: 20%;
text-align: center;
margin-bottom: 20rpx;
font-size: 28rpx;
}
.kind_item image{
width: 74rpx;
height: 74rpx;
}我开始是认为navigator组件的默认样式把我都排版打乱了，后来我改了也没用。之后我又各种百度，问题不在css是wxml。使用navigator组件时需要用<view>
解决方案：
<text>{{item.name}}</text>
改为：
<view>{{item.name}}</view>还有一种方式：
微信小程序云函数报错Error: errCode: -404011 -504002
虽然我的这个报错原因有些乌龙（后来去社区提问网友帮我发现的），但是还是可以给云函数报错debug提供很多思路。
项目场景：
我写的这个云函数主要用途是购物车里的删除，传的值是选中对象的id。
问题描述：
报错图片如下：
原因分析：
目录如下：
这里有package-lock.json说明我的安装了wx-server-sdk依赖，同时我也右击cart_detele部署了云函数（这个部署成功会有提示）
js函数如下：
仔细检查了一遍js里的函数和云函数的逻辑，没有问题
云函数如下：
我的环境id也没错。实在看了很多博客都没解决，于是去微信开放社区提问了。
解决方案：
没检查拼写，而且这么明显的颜色不一样。仔细的人还会发现delete写成detele了。陷入深刻的反思中……
基于云开发的校园寻物小程序
这是项目地址：
https://gitee.com/hitberlin/we-chat
还有写过的小程序项目演示视频：
