微信小程序开发、笔记

最新推荐文章于 2023-11-20 17:13:04 发布

m0_59134070

最新推荐文章于 2023-11-20 17:13:04 发布

阅读量350

点赞数

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

本文链接：https://blog.csdn.net/m0_59134070/article/details/121118237

版权

本文详细介绍了微信小程序的入门知识，包括其概念、优缺点、环境搭建过程。重点讲解了WXML标签语言、全局配置文件app.json、样式处理、数据绑定、事件处理、页面跳转、组件通信等内容，为开发者提供了全面的小程序开发指南。

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

微信小程序入门

什么是微信小程序？

小程序可以视为只能用微信打开和浏览的网站，小程序页面本质上就是网页

微信小程序的缺点

项目体积不能超过20MB

微信小程序的优势

微信 App 的功能（比如拍照、扫描、支付等等），小程序大部分都能使用

环境搭建流程

微信公众平台注册上注册开发者账号，得到APPID和APPSecret
下载微信开发工具，创建项目时填写自己的APPID

小程序的WXML 标签语言

<view>

标签表示一个区块，用于跟其他区块分隔, 类似 HTML的<div>标签

<text>

表示一段行内文本，类似于 HTML的<span>标签

全局配置文件:app.json

{
  "pages": [
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ff0000", //导航栏的颜色,默认黑色
    "navigationBarTextStyle": "white",   //导航栏的文字颜色,只支持黑白,默认白
    "navigationBarTitleText": "小程序 Demo"     //导航栏的文字，默认为空
  }
}

小程序样式处理

全局样式文件：顶层的app.wxss文件，里面采用 CSS 语法设置页面样式局部样式文件：每个page对应一个单独的wxss文件推荐布局方式：Flex 推荐长度单位：rpx【小程序自创响应式单位，任何设备宽度都是750rpx】推荐的UI框架：WeUI【官方封装的UI框架】WeUI

WEUI框架使用

源码：https://github.com/Tencent/weui-wxss/ 在dist/style/weui.wxss文件，将源码全部复制到你的app.wxss文件的头部

<view>
  <button class="weui-btn weui-btn_primary">
    主操作
  </button>
  <button class="weui-btn weui-btn_primary weui-btn_loading">
    <i class="weui-loading"></i>正在加载
  </button&g