微信小程序学习

Posted 2021-08-27 bslydhs

一、环境准备 

        1、注册一个微信小程序帐号

               https://mp.weixin.qq.com/wxopen/waregister?action=step1

                注册完成后申请一个AppId，前期开发也可以不申请，使用测试id，测试id一些支付等功能不能使用，程序后期可修改AppId

        2、下载微信小程序开发工具

                https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html        

        3、小程序创建

                打开开发工具通过项目新建小程序，填写名称，小程序id等基础信息后即可新建

二、小程序目录结构

        

 

三、小程序全局配置（app.json）

         

{
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window":{ // 更多属性请查阅https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9
        "backgroundTextStyle":"light",  // 下拉 loading 的样式，仅支持 dark / light
        "enablePullDownRefresh": true,  // 是否开启全局的下拉刷新
        "navigationBarBackgroundColor": "#fff",  // 导航栏背景色
        "navigationBarTitleText": "Weixin",  // 导航栏文字内容
        "navigationBarTextStyle":"black"  // 导航栏的字体颜色
    },
    "tabBar": {
        "color": "#999",
        "selectedColor": "#ff2d4a",
        "backgroundColor": "",
        "position": "bottom",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "./icons/home.png",
                "selectedIconPath": "./icons/home-o.png"
            },
            {
                "pagePath": "pages/category/category",
                "text": "分类",
                "iconPath": "./icons/category.png",
                "selectedIconPath": "./icons/category-o.png"
            },
            {
                "pagePath": "pages/cart/cart",
                "text": "购物车",
                "iconPath": "./icons/cart.png",
                "selectedIconPath": "./icons/cart-o.png"
            },
            {
                "pagePath": "pages/user/user",
                "text": "我的",
                "iconPath": "./icons/my.png",
                "selectedIconPath": "./icons/my-o.png"
            }
        ]
    }
}

四、循环渲染

        小程序的循环渲染使用wx:for,以下为使用示例：

        1、首先在js文件的data中创建一个示例数组

data: {
    list: [
      {
        id: '1',
        name: '孙悟空'
      },
      {
        id: '2',
        name: '猪八戒'
      }
    ]
 },

         使用时在对应的wxml文件中写入wx:for

<!--
  循环渲染
  wx:for="{{数组}}"
  wx:key 如果为×this代表当前项
   wx:for-item='item' wx:for-index="index" 为默认值，可以省略
-->
<view>
  <view wx:for="{{list}}" wx:for-item='item' wx:for-index="index" wx:key="index">
    索引： {{index}}
    值： {{item.name}}
  </view>
</view>
<!--
  wx:for="{{对象}}"
  wx:for-item='对象的值' wx:for-index="对象的属性"
-->
<view>
  <view wx:for="{{list[0]}}" wx:for-item='value' wx:for-index="index" wx:key="index">
    属性： {{index}}
    值： {{value}}
  </view>
</view>

 五、条件渲染

        条件渲染分为wx:if与hidden，分别对应vue中的v-if和v-show

<view>
  喜欢
  <text wx:if="{{'true'}}">小倩</text>
  <text wx:elif="{{'false'}}">小晴</text>
  <text wx:else>小薇</text> 
</view>

<view :hidden="false">其实喜欢小薇</view>

六、事件绑定

         小程序绑定事件的关键字是bind，比如点击事件是bindtap，input输入事件是bindinput，下面是wxml文件中的相关示例代码

<!--
  事件绑定
  button的点击事件bindtap
  小程序是无法直接在事件中传参的,错误示例：<button bindtap="handletap(1)">-</button>
  只能通过自定义属性的方式来传递参数data-operation
-->
<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>

         对应js文件代码

handletap (e) {
    // 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({  // 小程序对data值进行修改的时候必须是通过setData，直接赋值是无效的
      num: this.data.num + operation
    })
  },

七、父子组件传值

1、创建组件

        打开微信开发者工具，创建组件，会生成四个文件：wxml,wxss,js,json；我们可以看到js和json中的代码与page不同

// js文件中的代码
Component({
  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
  }
})

// json中的代码
{
  "component": true,
  "usingComponents": {}
}

2、引入组件

        在父组件的json中引入：

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}

        在wxml中的使用

<view>
    <componentA />
</view>

3、父传子

        在父组件的wxml中使用时

<view>
   <view>子组件内容：</view>
   <componentA param='我是子组件中传入的参数'/>
</view>

        子组件在对应的js文件中通过properties接收

Component({
  properties: {
    param: {
      type: String,
      value: '111111' // 默认值
    }
  },

})

4、子传父

要让子组件给父组件传参，首先得在父组件引入子组件的时候，加个触发事件，如下：

 <componentA param='我是传入的参数' bind:myevent="onMyEvent"/>

并在父组件的js中添加对应的onMyEvent方法：

methods: {
  onMyEvent:function(e){
    this.setData({
      param: e.detail.param
    })
  }
}

最后在子组件的js中通过triggerEvent调用父组件的onMyEvent方法

 this.triggerEvent('myevent', { param:123});

八、生命周期

        小程序的生命周期分为app生命周期，page生命周期和组件生命周期 

        App 

               onLaunch（小程序初始化）、onShow（小程序启动或切前台）、onHide（小程序切后台）

       Page

                onLoad（页面加载）、onShow（页面显示）、onReady（页面初次渲染完成）、onHide（页面隐藏）、onUnload（页面卸载）

        Component

                created（在组件实例刚刚被创建时执行，注意此时不能调用 setData）、attached（在组件实例进入页面节点树时执行）、ready（在组件布局完成后执行）、moved（在组件实例被移动到节点树另一个位置时执行）、detached（在组件实例被从页面节点树移除时执行）

小程序的整体加载顺序是这样的：

• 首先执行 App.onLaunch -> App.onShow
• 其次执行 Component.created -> Component.attached
• 再执行 Page.onLoad -> Page.onShow
• 最后 执行 Component.ready -> Page.onReady