小程序基础知识点

目录

1.目录结构

2.重要的配置（app.json）文件

（1）pages：页面存放的路径（哪个在最前面就是默认页面） 

（2）window：项目的窗口

（3）tabBar：底部栏的配置

3.内置组件

4.模板渲染 

---

---

1.目录结构

---

2.重要的配置（app.json）文件

        全局配置文件，包括了页面的路径，窗口的外观，底部tab的配置等 

（1）pages：页面存放的路径（哪个在最前面就是默认页面） 

（2）window：项目的窗口

    "enablePullDownRefresh": true,     //允许下拉刷新
    "backgroundTextStyle": "dark",     //下拉刷新的加载状态 light静态 dark动态
    "backgroundColor": "#fcc",         //下拉刷新背景颜色
    "navigationBarBackgroundColor": "#fff",  //导航栏背景颜色
    "navigationBarTitleText": "默认标题",    //导航栏文本
    "navigationBarTextStyle": "black"     //导航栏文字颜色 只有白色和黑色

（3）tabBar：底部栏的配置

---

3.内置组件

1. view：块，双标签，类似div 
2. text：文本，行内块元素
3. user-select="true"：用户可长按选择
4. rich-text：富文本，作用是把HTML字符串渲染为对应的UI结构
5. image：图片组件
   1. src：图片地址
   2. mode：模式
      1. scleToFill：不保持宽高比，缩放
      2. aspectFill：保持宽高比，使图片的短边能完全显示出来
      3. aspectFit：保持宽高比，使图片的长边能完全显示出来
      4. widthFix：宽不变，高自动
      5. heightFix：高不变，宽自动
      6. left，right，top，bottom，center：显示局部
6. navigator：导航组件，类似a链接
7. input：输入框
   1. value：值
   2. placeholder：提示文本
   3. password="true" ：密码框
   4. confirm-type：键盘右下角为
      1. send：发送
      2. search：搜索
      3. next：下一个
      4. go：前往
      5. done：完成
   5. type：弹出不同键盘
      1. text：文本键盘
      2. number：数字键盘
      3. idcard：身份证键盘
      4. digit：带小数点的数字键盘
      5. safe-password：安全键盘
      6. nickname：昵称键盘               
8. button：按钮
   1. size："mini"：行内小按钮
   2. type：颜色
      1. primary：绿色
      2. default：白色
      3. warn：红色
9. switch：切换（开关） 
   1. color：颜色
   2. type="checkbox"：选择框
10. picker：从底部向上弹起的滚动选择器
    1. header-text：标题文本
    2. mode：
       1. times：事件
       2. date：日期
       3. region：省市区 
11. icon：图标
    1. color：图标颜色
    2. size：图标显示大小，默认单位是px
    3. type：图标显示类型：
       1. success： 成功
       2. success_no_circle：已选择
       3. info：警告
       4. warn：红色（强烈）警告
       5. waiting：等待
       6. cancel：停止或关闭
       7. download：下载
       8. search：搜索框
       9. clear：灰色的停止或关闭
12. scroll-view：可滚动视图区域
    1. scroll-x="{{true}}"：水平可滚动
    2. scroll-y="{{true}}"：垂直可滚动
    3. 要给组件设置为不换行：white-space：nowrap 
13. swiper：轮播图的外层容器
    1. 可设置宽高
    2. circular：设置swiper-item是否使用衔接滑动
    3. interval：设置swiper-item的切换时间间隔，默认5000毫秒
    4. autoplay：是否自动播放，默认false
    5. indicator-dots：是否显示指示器，分页器
    6. indicator-color：指示器未选中的颜色
    7. indicator-active-color：指示器选中的颜色
14. swiper-item：第N个轮播图

4.模板渲染 

1.文本渲染：{{ }}

2.条件渲染：

        wx.if="{{条件}}"

        wx.elif="{{多重条件}}"

        wx.else