微信小程序--初识小程序

最新推荐文章于 2024-03-04 22:06:13 发布

快提醒我去学习

最新推荐文章于 2024-03-04 22:06:13 发布

阅读量104

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_49021391/article/details/127434895

版权

一、微信小程序的优势和劣势

优势

微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。
使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

不足

单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是20M（这个值一直在变化，以官网为准）。
需要像app一样审核上架，这点相对于H5的发布要麻烦一些。
处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

二、项目的目录结构

pages:
1. wxml: 编写小程序界面结构的地方
2. wxss: 编写小程序样式的地方
3. json：编写界面配置的地方
4. js：编写界面逻辑的地方
utils: 编写工具类的地方
app.js：创建程序实例的位置
app.json: 编写全局配置地方
app.wxss: 编写全局样式的地方
project.config.json: 项目的配置文件
sitemap.json：配置哪些网站可以被检索到

可以添加编译模式，来改变编译后的默认页面，方便开发

配置tabbar（需要注意的是，tabbar的图标不能是线上的地址，需要提前准备好放到项目里，一般情况下，这些静态资源可以放在assets文件夹下）

写在根目录的app.json文件中，需要注意list中最少要有两个，最多只能有五个

  "tabBar": {
    "color":"",
    "selectedColor": "#f00",
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "./assets/shouye.png",
      "selectedIconPath": "./assets/shouye1.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "log",
      "iconPath": "./assets/bianji.png",
      "selectedIconPath": "./assets/bianji1.png"
    },
    {
      "pagePath": "pages/home/home",
      "text": "我的",
      "iconPath": "./assets/grzl.png",
      "selectedIconPath": "./assets/grzl1.png"
    }
  ]
  },

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。

view标签是我们开发过程中最常用的标签了，这个就相当于Html中的div。

text标签也是我们开发中常用的，这个相当于Html中的span

image标签相当于我们Html中的img。

数据定义

在界面对应的JS文件中的data属性上定义数据

data: {

msg:"hello world",

num: 18,

  },

引用数据

通过{{}}的方式可以引用数据。

小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。

逻辑渲染

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

使用 wx:elif 和 wx:else 来添加一个 else 块：

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。

使用 wx:key 来指定列表中项目的唯一的标识符。

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

Template

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段

<template name="msgItem">

  <view>

    <text> {{index}}: {{msg}} </text>

    <text> Time: {{time}} </text>

  </view>

</template>

在对应的js的data中

msgList:[

      {

        index: 0,

        msg: '这是一段模板',

        time: '2020-10-10'

      }

    ]

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。

<view wx:for="{{msgList}}">

  <template is="msgItem" data="{{...item}}"></template>

</view>

模板的引用

WXML 提供两种文件引用方式import和include。

app.js的生命周期

onLaunch: 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow：当小程序启动，或从后台进入前台显示，会触发 onShow
onHide：当小程序从前台进入后台，会触发 onHide
onError：当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息。
page中的生命周期

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

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

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

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

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

全局数据的定义以及获取

1.定义：app.js中的globalData中定义全局变量

2.获取：在其他JS中可以通过getApp()获取App实例，之后可以获取到定义在App实例上的数据。