学习一下miniprogram

最新推荐文章于 2024-08-06 13:44:12 发布

高桥靓仔

最新推荐文章于 2024-08-06 13:44:12 发布

阅读量1.1w

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45221036/article/details/106540540

版权

本文详细介绍了微信小程序的各个方面，包括小程序的初体验，如数据绑定和列表渲染，小程序的架构配置，如各配置文件的作用，双线程模型的工作原理，以及小程序的注册和页面注册过程。此外，还深入探讨了Page实例的生命周期和小程序的内置组件，如Text、Button、View、Image、Input和ScrollView。

摘要由CSDN通过智能技术生成

微信小程序

一、小程序初体验

1】小程序的数据绑定

和vue一样使用的是双大括号来在wxml中绑定js中的变量

// pages/home/home.js
Page({
   
  data: {
   
    name:'rayhomie',
  }
})

<!--pages/home/home.wxml-->
<!--1. 小程序的数据绑定 -->
<view>hello {
  {name}}</view>

注意：在小程序中不能在js中操作dom

2】小程序的列表渲染

// pages/home/home.js
Page({
   
  data: {
   
    students:[
      {
   id: 1,name:'zhangsan', age:18 },
      {
   id: 2, name: 'lisi', age: 20 },
      {
   id: 3, name: 'wangwu', age: 10 },
      {
   id: 4, name: 'liuqi', age: 15 }
    ]
  }
})

<!--pages/home/home.wxml-->
<!--2.列表渲染 wx:for -->
<view wx:for='{
    {students}}'>{
  {item.id}}-{
  {item.name}}-{
  {item.age}}</view>
//需要使用默认的item来指定展示每个对象里不同属性值

3】小程序的事件监听改变data

不是响应式的，需要setData

在小程序js的page中直接写函数，不需要创建methods属性，而且函数中的this指向的是PageOptions

// pages/home/home.js
Page({
   
  data: {
   
    counter:0
  },
  handleBtnClick(){
   
    //1.错误的，这不像vue，它是不是响应式的双向绑定
    //this.data.counter=this.data.counter+1
    //console.log(this.data.counter)
    //2.使用this.setDate()直接更改data中的数据的值
    this.setData({
   
      counter:this.data.counter+1
    })
    }
})