微信小程序 day01

最新推荐文章于 2024-11-11 17:32:28 发布

Q_0

最新推荐文章于 2024-11-11 17:32:28 发布

阅读量130

点赞数

分类专栏：微信小程序day01 文章标签：小程序

本文链接：https://blog.csdn.net/weixin_51985718/article/details/119006885

版权

微信小程序day01 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小程序的优势：

1、微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个入口，这些入口有助于企业更好的获取流量，从而进行转化和变现

2、使用便捷

3、体验良好，有接近原生app的体验。h5页面经常出现卡顿、延时、加载慢、权限不足等元音音，而这些问题在小程序里都不会出现

4、成本低，小程序的花费约是APP的十分之一

小程序的不足

1、单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是16M（这个值一直在变化，以官网为准）

2、需要像app一样审核上架，相对于H5的发布要麻烦一些

3、处处受微信限制，例如不能直接分享到朋友圈，涉及到积分或者虚拟交易的时候，小程序也是不允许的

项目的目录结构

pages：

wxml：编写小程序界面结构的地方

wxss：编写小程序样式的地方

json：编写界面配置的地方

js：编写界面逻辑的地方

utils：编写工具类的地方

app.js：创建程序实例的地方

app.json：编写全局配置地方

app.wxss:编写全局样式的地方

project.config.json：项目的配置文件

sitemap.json配置那些网站可以呗检索到

tabbar设置在app.json中，图片只能用本地地址，不能是线上地址

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "assets/icons/index.png",
      "selectedIconPath": "assets/icons/index-active.png"
    },{
      "pagePath": "pages/my/index",
      "text": "我的",
      "iconPath": "assets/icons/wode.png",
      "selectedIconPath": "assets/icons/wode-active.png"
    }]
  },

小程序中的组件（标签）

view 相当于html中的div

text相当于html中的span

image 相当于html中的img

其余请看官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/

在小程序中，使用WXML语言通过数据绑定来实现界面数据的更新

1、先在data属性中定义数据

data:{

age:18,

}

2、引用数据

通过{{}}的方式来引用数据

逻辑渲染

在WXML中，使用wx:if="{{}}"来判断是否需要渲染该代码块

data: {
    age:18
  },


<view wx:if="{{age>14}}" hidden="{{age}}">age>20</view>
<view wx:if="{{age>15}}" >age=22</view>
<view wx:elif="{{age>16}}">age=23</view>
<view wx:else>age</view>

其中hidden属性是通过display属性设置为none来进行条件渲染

列表渲染

通过wx-for循环来渲染数组或对象的数据

data: {
    age:18,
    array:[{name:'张三',age:'男'},{name:'lixi',age:'nv'}]
  },



<view wx:for="{{array}}">
{{index}}-{{item.name}}-{{item.age}}
</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itm">
{{idx}}-{{itm.name}}-{{itm.age}}
</view>

Template

先创建模板，然后在实例中引用


<view wx:for="{{array}}">
  <template is="msgItem" data="{{...item}}"></template>
</view>
<template name="msgItem">
  <view>
    <text> {{name}}-{{age}} </text>
  </view>
</template>

引用

1、import <import src="文件地址">

import有作用域的概念，例如：c引入b，b引入a，c只能拿到b中的template，不能拿到a定义的template

2、include <include src="文件地址">

include可以将整个文件都拷贝到

小程序中的wxss

小程序中是以rpx为尺寸单位，1rpx=0.5px

样式的导入：

@import ‘样式文件地址’

小程序目前支持的选择器

小程序中的js

小程序目前可以运行的三大平台

1、ios平台

2、Android平台

3、小程序IDE

小程序和浏览器渲染数据有什么不同

浏览器中渲染是单线程的

而在小程序中的运行环境分为渲染层和逻辑层，WXML模板和WXSS样式工作在渲染层，js脚本工作在逻辑层

小程序如何渲染数据

1、在WXML模板中使用view标签，用{{}}来绑定一个变量

2、在JS脚本中使用this.setData方法把{{}}中的字串设置出来

程序和界面

小程序指的是产品层面的成熟，而程序值得是代码层面的程序实例

onLaunch：当小程序初始化完成是，会触发onLaunch（全局只触发一次）

onShow：当小程序启动，或从后台进入前台显示，会触发onShow

onHide：当小程序从前台进入后台，会触发onHide

onError：当小程序发生脚本错误，或者API调用失败时，会触发onError并带上错误信息

其他字段：可以添加任意的函数和数据到Object参数中，在App实例回调用this可以访问

生命周期

onLoad：生命周期函数--监听页面加载，触发时机早于onShow和onReady

onReady：生命周期函数--监听页面初次渲染完成

onShow：生命周期函数--监听页面显示，触发事件早于onReady

onHide：生命周期函数--监听页面隐藏

onUnload：生命周期函数--监听页面卸载

数据

WXML可以通过数据绑定的语法绑定从逻辑层传递过来的数据字段，这里所说的数据其实就是来自于页面Page构造器的data字段，data参数是页面第一次渲染时从逻辑层传递到渲染层的数据。

在JS脚本中如果需要获取到data上的数据，需要通过this.data获取。

<view>{{text}}</view>

// page.js

Page({

data: {

text: '天亮教育',

},

onLoad(){

console.log(this.data.text)

}

})

如果涉及到更新，这里可以调用Page实例提供的setData把数据传递给渲染层，从而达到更新界面的目的。由于小程序的渲染层和逻辑层分别在两个线程中运行，所以setData传递数据实际是一个异步的过程，所以setData的第二个参数是一个callback回调，在这次setData对界面渲染完毕后触发。

setData其一般调用格式是 setData(data, callback)，其中data是由多个key: value构成的Object对象。

// page.js

Page({

onLoad: function(){

this.setData({

text: 'change data'

}, function(){

// 在这次setData对界面渲染完毕后触发

})

}

})

注意事项：