微信小程序
创始人
2024-02-29 10:17:05
0

1、小程序介绍

        小程序是什么?

           小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。任何一个普通的开发者,经过简单的学习和练习后,都可以轻松地完成一个小程序的开发和发布。

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

        优势

                1、微信助理,容易推广。

                2、使用便捷。

                3、体验良好,有接近原生app的体验。

                4、成本更低,从开发成本到运营推广成本,小程序的花费仅为APP的十分之一,无论是对创业者还是传统商家来说都是一大优势。

        不足

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

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

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

3、项目的目录结构    

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

4、小程序模板语法

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

        标签的使用

                在小程序中没有H5提供的那些标签了,这里我们需要使用小程序给我们提供的组件。小程序给我们提供的标签很多,这里我们就介绍几个常用的,剩下的大家可以结合文档使用。

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

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

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

        数据绑定      

                用户界面呈现会因为当前时刻数据不同而有所不同,或者是因为用户的操作发生动态改变,这就要求程序的运行过程中,要有动态的去改变渲染界面的能力。

在 Web 开发中,开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中,使用 WXML 语言所提供的数据绑定功能,来完成此项功能。

        数据定义

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

data: {
msg:"hello world",
num: 18,},

        引用数据

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

                除了引用数据之外,这里还可以进行一些计算,最终显示的结果是计算之后得到的结果。

{{msg}},{{num + 10}}

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

        逻辑渲染

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

{condition}}"> True 

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

{length > 5}}"> 1 
{length > 2}}"> 2 
 3 

                因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

{true}}"> view1  view2 

                除此之外微信小程序还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候会删除掉对应的DOM,hidden属性则是通过display属性设置为none来进行条件渲染。

{condition}}">
隐藏

        列表渲染

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


{array}}">{{index}}: {{item.name}}

.......

相关内容

热门资讯

AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
AWR报告解读 WORKLOAD REPOSITORY PDB report (PDB snapshots) AW...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限,您可以使用AWS Identity and Access Ma...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
群晖外网访问终极解决方法:IP... 写在前面的话 受够了群晖的quickconnet的小水管了,急需一个新的解决方法&#x...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
Azure构建流程(Power... 这可能是由于配置错误导致的问题。请检查构建流程任务中的“发布构建制品”步骤,确保正确配置了“Arti...