【微信小程序】原来如此简单

Bertha 。 2022-12-10 05:54 176阅读 0赞

## wx小程序与传统web的对比 ##

传统web一般就只有3个结构(html,css,js)，而小程序多了个(json)配置文件

##  ##

<table> 
 <thead> 
  <tr> 
   <th>结构</th> 
   <th>传统web</th> 
   <th>微信小程序</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>结构</td> 
   <td>HTML</td> 
   <td>WXML</td> 
  </tr> 
  <tr> 
   <td>样式</td> 
   <td>CSS</td> 
   <td>WXSS</td> 
  </tr> 
  <tr> 
   <td>逻辑</td> 
   <td>Javascript</td> 
   <td>Javascript</td> 
  </tr> 
  <tr> 
   <td>配置</td> 
   <td>无</td> 
   <td>JSON</td> 
  </tr> 
 </tbody> 
</table>

通过上面的对比可以看出，微信小程序是四层结构，多个一层的**配置文件.json**

## wx小程序的目录结构 ##

要学习一个新的语言就要先要了解他的目录结构，以及目录结构中文件夹的功能  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center]  
**一、全局配置文件**  
全局配置文件主要有三个属性组成：`pages`，`window`，`tabBar`

*  pages主要是配置子页面的路径。
 *  window主要是配置顶部栏的一些信息。
 *  tabBar主要是配置底部导航栏的一些图标，跳转，文字等。

**二、页面的配置文件**  
就是配置每个页面中的json文件。  
他只能配置组件和顶部栏的一些信息

*  usingComponents用来配置自定义组件
 *  剩下的就直接在全局配置导航栏信息就可以了

## 具体语法 ##

**一、数据渲染**  
和vue的数据驱动渲染方式几乎差不多。  
js定义数据，wxml用`{ {数据/表达式}}`方式渲染。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 1]  
**二、循环**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 2]

<view wx:for="{
        {arry}}" wx:key="*this">{
        {
        index}}--{
        {
        item}}</view>
    <view wx:for="{
        {obj}}" wx:for-item="value" wx:for-index="key" wx:key="name">{
        {
        key}}--{
        {
        value}}</view>

**三、wx-if hidden**

<view wx:if="{
        {true}}">显示</view>
    <view wx:if="{
        {false}}">隐藏</view>
    
    <view>---------------------------------</view>
    <view hidden>hidden</view>
    <view hidden="{
        {false}}">hidden01</view>

**四、事件绑定**  
在一个标签中绑定事件的格式为：`bind+事件名="函数名"`

注：如果要这个函数中要传参数时就要借助`data-标签名="{ {数据}}"`

例子1(类似于vue的双向数据绑定)：

//html
    
    //1.bindinput为input事件
    <input type="text" bindinput="handleInput"/>
    //2.bindtap为点击事件
    <button bindtap="handleButton" data-num="{
        {1}}">+</button>
    <button bindtap="handleButton" data-num="{
        {-1}}">-</button>
    <view>
      {
        {
        num}}
    </view>
    
    //js
      data: {
        
        num:0
      },
      handleInput:function(e){
        
        //this.setData()是对数据进行修改的固定方式
        this.setData({
        
            //e.detail.value为input输入数据的值
          num:e.detail.value
        })
      },
      handleButton:function(e){
        
       //number为html中data-num属性传入的值
        var number= e.currentTarget.dataset.num
        this.setData({
        
          num:this.data.num+number
        })
      },

## 样式 ##

### 自适应宽度 ###

**rpx**是微信开发的自适应宽度，它规定一个屏幕的大小为750rpx

**例子**：存在一个页面 宽度 未知page

1.  页面 (宽度：page) ,期中存在一个元素 宽度为100px
2.  那以上需求实现不同屏幕大小的适配

**计算步骤**

page px=750rpx
    1px =750rpx/page
    100px=750rpx*100/page

### calc属性 ###

把公式计算出来的数，赋值给属性。要利用此公式做计算

view{
        width:calc(750rpx*100/325)
    }

### 样式导入 ###

wxss支持样式导入

格式：`@import+路径`

注意：格式只能是相对路径

@import '../../style/commint.wxss';

### 选择器 ###

在小程序中是不支持\*通配符选择器的。

别的和普通的css的选择器用法都一样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 3]

## 常见组件 ##

> view, text, rich-text, button , image , navigator , icon, swiper , radio, checkbox。

### view ###

类似html中的`div`标签

//不点击默认为none，点击之后切换对应样式
    <view hover-class="active">
    内容
    </view>

### text ###

类似html的`span`标签

[![wbGBIU.png][]][wbGBIU.png 1]

**样式和样式的具体属性**

[https://developers.weixin.qq.com/miniprogram/dev/component/view.html][https_developers.weixin.qq.com_miniprogram_dev_component_view.html]

### image ###

src:要写网络图片链接，image标签默认宽高320px 240px  
    
      mode:决定图片元素如何与图片做适配
    
        1.scaleToFill(默认)不等比例拉伸
    
        2.aspectFit 等比例拉伸  确保长边显示出来
    
        3.aspectFill 等比例拉升 确保短边显示出来
    
        4.widthFix 宽度指定，高度自动调节
    
        5.top,bottom。。类似于background-position
    
      lazy-load:懒加载会自己判断  视口 上下三屏幕 高度

### swiper ###

> 是wx小程序的轮播图插件

`swiper`是轮播图的父级标签，具体的元素用`swiper-item`期中可以放图片或链接

*  **swiper按照图片的大小自适应**

**公式：swiper的宽度/swiper的高度=图片的宽度/图片的高度**

一般swiper的宽度都会占整个屏幕的宽度，所以swiper的宽度已知（即100vw），所以只需要设置swiper的高度和图片的宽高适配就行了

图片的宽和高都已知，所以**swiper的高度为**：**swiper的宽度\*图片的高度/图片的宽度**

**具体属性**

[swiper属性][swiper]

例子：

![在这里插入图片描述][20200924103603248.gif_pic_center]

//wxml
    <swiper>
        <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"></image></swiper-item>
        <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"></image></swiper-item>
        <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"></image></swiper-item>
    </swiper>
    
    //wxss
    swiper{
        
      width: 100%;
      height:cale(100vw*280/520) ;
    }
    image{
        
      width: 100%;
    }

### navigator ###

相当于html中的`a`标签，但是他与`a`标签又有不同之处，它主要是用来进行页面的跳转

是一个块级元素标签

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 4]

### rich-text ###

相对于`vue`中`v-html`

*  nodes属性

该属性用于设置html值

<rich-text nodes="{
        {html}}"></rich-text>

*  受信任的HTML节点及属性：

[https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html][https_developers.weixin.qq.com_miniprogram_dev_component_rich-text.html]

### button ###

不同寻常的按钮

//样式
    <button>默认样式</button>
    
    <button size="mini">mini</button>
    
    <button type="primary">primary</button>
    
    <button type="warn" plain>warn和plain</button>
    
    <button type="primary" loading>loading</button>
    
    <button disabled>disabled</button>
    
    
    
    
    <button open-type="share">share</button>
    
    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
    
    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>
    
    <button open-type="openSetting">授权页面</button>
    
    <button open-type="contact">联系客服</button>
    
    <button open-type="feedback">feedback</button>

### icon ###

wx封装的字体图标

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 5]

### radio ###

单选框，要配合radio-group使用，也可以利用color属性改变颜色

//wxml
    <radio-group bindchange="gender">
    
      <radio value="male" color="blue">男</radio>
    
      <radio value="female" color="blue">女</radio>
    
    </radio-group>
    
    <view>{
        {
        gender}}</view>
    
    //js
    data: {
        
        gender:""
      },
      gender:function(e){
        
        let gender=e.detail.value
        this.setData({
        
          gender
        })
      },

### checkbox ###

多选框，和radio用法差不多，要配合checkbox-group使用，也能利用color改变颜色

//wxml
    <checkbox-group bindchange="checkChaneg">
        <checkbox wx:for="{
        {list}}" wx:key="name" value="{
        {item.value}}">{
        {
        item.name}}</checkbox>
    </checkbox-group>
    <view wx:for="{
        {viewText}}" wx:key="*this">{
        {
        item}}</view>
    
    //js
    data: {
        
        list:[{
        
          name:"香蕉",
          value:'bananr'
        },{
        
          name:"苹果",
          value:'apple'
        },{
        
          name:"西瓜",
          value:'melon'
        }],
        viewText:[]
      },
      checkChaneg:function(e){
        
        let viewText=e.detail.value
        this.setData({
        
          viewText
        })
      },

## 自定义组件 ##

> 主要是指在页面中封住一些通用的功能到一个组件中

*  首先先建立一个组件目录结构

![wX96bR.png][]

通过wxml，js和wxss定义样式

*  配置自定义的组件

在要用这个组件的项目中的`配置文件.json`中配置

[![wX9XPf.png][]][wX9XPf.png 1]

*  在wxml中直接写这个组件就可以运用了

### 父类向子类传参 ###

> 如果这个自定义组件的文字要根据每个父级穿过来的参数动态改变，就要运用到此功能

*  例如：动态改变标签的文字

[![wXPH4P.png][]][wXPH4P.png 1]

**父级：运用组件的实例、子级：组件**

主要是运用自定义组件的属性传参，进行此操作，然后在组件的`js`文件中的properties属性接受

接受方式：

//list为接受传来的参数，value为默认值
    properties: {
        
          list:{
        
            type:Array,
            value:[]
          }
      },

父级穿过来的值，子级可以就当这个值是data中的值一样的使用，就完成了此功能

### 子级向父级传参 ###

> 通过子级自定义事件传给父级，然后再在子级的做js操作就显得比之前只在组件中定死js逻辑要爽

因为在组件写js逻辑，是在组件中定死的逻辑，而在父级写就是跟随父级变化的逻辑

*  首先在组件触发事件时，自定义组件并把数据传给父级

methods: {
        
        Tap(e){
        
          let{
        index}=e.currentTarget.dataset;
          this.triggerEvent('itemChange',{
        index})
        }
      }
    })

*  父级利用自定义组件的回调函数接受数据，并做js处理

//wxml
    <Tabs list="{
        {list}}" binditemChange="change"></Tabs>
    
    //js
     change(e){
        
         let {
        index}=e.detail;
         let {
        list}=this.data
          // wx小程序foreach会把修改的项保存到原数组中
          list.forEach((v,i)=>{
        
            if (i===index){
        
              v.isTrue=true
            }else{
        
              v.isTrue=false
            }
          })
          this.setData({
        
            list
          })
      },

### 点击标题内容改变 ###

在组件中运用slot标签，solt便签的内容会被父级所运用的组件标签的内容所替代

![在这里插入图片描述][20200924140531111.gif_pic_center]

*  组件实现步骤

在组件中使用solt标签，用来被父级内容替换

*  运用组件父级

### 自定义组件补充 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 6]

### 生命周期 ###

> 生命周期就是系统自定好的**触发事件**，只不过触发时机由系统已经定义好了

分为**应用生命周期**和**页面生命周期**

**一、应用生命周期就是`app.js`监听的各种生命周期事件**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 7]

**二、页面生命周期**

在每个pages文件中的js文件中配置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 8]  
生命文档[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html][https_developers.weixin.qq.com_miniprogram_dev_framework_app-service_page-life-cycle.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/bc3f6b8b62364548b4344cac719a6c32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/932b81ff097a46e080aa5482302f1285.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/f4e92d3953e845f8969aef37d4df9808.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/ea1917529c844b02a220ee000fc3b287.png
[wbGBIU.png]: /images/20221123/cb3054adf812486aa47b005538d6166f.png
[wbGBIU.png 1]: https://imgchr.com/i/wbGBIU
[https_developers.weixin.qq.com_miniprogram_dev_component_view.html]: https://developers.weixin.qq.com/miniprogram/dev/component/view.html
[swiper]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
[20200924103603248.gif_pic_center]: /images/20221123/af3b102f266d4b668187a68d203065d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/de21df9b30a8432fbeb55e7e1c26b99f.png
[https_developers.weixin.qq.com_miniprogram_dev_component_rich-text.html]: https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/e0853f37e4d34f5d8ffbc7739e6d329e.png
[wX96bR.png]: /images/20221123/327f3aaab65845999040f24632ca3a5b.png
[wX9XPf.png]: /images/20221123/db3b4510e5b14eb794b865da26eabdca.png
[wX9XPf.png 1]: https://imgchr.com/i/wX9XPf
[wXPH4P.png]: /images/20221123/833ab60a06bc4884b0066687e3ee6a29.png
[wXPH4P.png 1]: https://imgchr.com/i/wXPH4P
[20200924140531111.gif_pic_center]: /images/20221123/099cf70fd08e4cf59be6da2f8d15daf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/b9fb4bd6ed634e68a3413c5501578c5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/29079ebdb75440b0ad1c8518877bd5b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/2f72ca86f2f94997bc413298c0689303.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_app-service_page-life-cycle.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html