微信小程序开发，基础知识点汇总详解

目录

一.目录中文件说明

1.app.js文件

2.project.config.json文件

3.sitemap.json文件

4.页面中的.json文件

5.如何创建小程序页面

二.微信中代码的格式与H5和CSS3中区别

1.wxml和HTML的区别

2.wxss和css的区别

三.微信小程序中常用组件

1.常用的视图容器组件

swiper和swiper-item轮播图容器组件和轮播图item组件

2.常见的基础内容组件

3.其他常见组件

四.wxml模板语法

  1.Mustache语法{{}}

  2.常用事件

3.给data()中数据重新赋值

4.事件传参

 infor会被解析成参数名字  ，数值2会被解析成参数的值

5.bindinput

6.条件渲染

五.总结

---

一.目录中文件说明

1.app.js文件

pages:用来记录当前小程序所有页面的路径，其中第一个路径表示首页。

window:所有页面的背景色和文字颜色。

style:全局定义小程序组件样式版本，v2表示最新版样式

2.project.config.json文件

app.id:小程序的账号

projectname:项目名称

注意若不想在终端上显示警告信息：project.config.json->seeting->"checkSitMap":false

3.sitemap.json文件

用来配置小程序是否允许微信的索引

action:'allow / disallow'

4.页面中的.json文件

设置页面中的外观配置，若以app.json冲突，以页面的权重高

5.如何创建小程序页面

在app.json中新加路径，会自动按照路径进行创建

二.微信中代码的格式与H5和CSS3中区别

1.wxml和HTML的区别

标签名称不同

html：div , span ,img,a

wxml:view ,text,image,navigator  (上下一一对应)

属性节点不同

html:<a href="#"></a>

wxml:<navagator  url="/   /"></navagator>

2.wxss和css的区别

    新增了rpx单位

   rpx把屏幕等分为750份

   提供了全局样式和局部样式

   app.wxss和 页面中.wxss

  @import'相对路径';导入样式

支持大部分C3选择器(冷门的慎用)

三.微信小程序中常用组件

1.常用的视图容器组件

  view类似于div进行使用

<div></div>====<view></view>

  scroll-view实现滚动列表效果

<scroll-view scroll-y> 
<view></view>  
<view></view>
<view></view>
</scroll-view>

                注意：在样式中必须给scroll-view加一个固定高度

            scroll-y:纵向滚动    scroll-x:横向滚动  

swiper和swiper-item轮播图容器组件和轮播图item组件

<swiper>
 <swiper-item>
    <view>A</view>
 </swiper-item>
 <swiper-item>
    <view>A</view>
 </swiper-item>
 <swiper-item>
    <view>A</view>
 </swiper-item>
<swiper>

其中 swiper可接收不同属性

2.常见的基础内容组件

 text:类似于span，长按选中复制只能在text节点下  例如

<text  selectable>长按复制文本<text>

        新版本把selectable替换成了 user-select 文章发布之时selectable可用

rich-text:把html渲染为UI结构

3.其他常见组件

button

      按钮类型 type:default,primary(绿色)，warn（红色）

      按钮大小size:default,mini

      镂空按钮  plain

images

     默认宽高：300px   240px

     属性

四.wxml模板语法

  1.Mustache语法{{}}

    类似于vue中插值表达式{{}},但是动态绑定不用v-bind

  2.常用事件

     tap:类似于click             绑定方式：bindtap

    input:文本输入框                 绑定方式：bindinput                           

    change:状态改变时触发             绑定方式：bindchange

    currentTarget和target的区别

   

3.给data()中数据重新赋值

 调用this.setData()方法

4.事件传参

     注意：不能直接在（）中传递参数

     data-*自定义属性传参，*代表参数名字

<button bindtap="btn"  data-info="{{2}}">

 infor会被解析成参数名字  ，数值2会被解析成参数的值

    event.target.dataset.info() 具体参数值

5.bindinput

 event.detail.value   获取变化过后，文本最新值

<input bindinput="bbb" ></input>

 bbb(e){
        console.log(e.detail.value)
    },

6.条件渲染

wx:if      wx:elif     wx:else

      结合<block></block>使用wx:if可以控制多个组件的显示和隐藏

  

hidden 显示false 与隐藏 true

      hidden和wx:if区别

       wx:if:动态的创建和删除

       hidden：display:none/block

 wx:for        

 <view wx:for="{{arrry}}">
  索引{{index}} 值{{item}}
  </view>

        其中：wx:for-index=""  指定索引名称

                  wx:for-item=""   指定值名称

wx:key

     把id或索引当做key，提高渲染效率      

五.总结

以上就是微信小程序开发的基本语法知识点，类似于vue，和vue在很多方面还有很多区别。

                                                                                                                        2022-4-12