探索、思考、创造、分享

数据驱动、坚持为客户提供有价值的服务和内容

当前位置:首页>小程序资讯
id | #firstname | 选择拥有 id="firstname" 的组件
来源:南京小程序开发 发布时间:2023-08-16点击:105

前言

经过这段时间对小程序的开发,分享一下这段时间的学习成果,如果有说得不对或者不完整的地方还请大家及时补充。

关于小程序的简介,我就不多说了。大家应该都对小程序有一些了解。作为开发人员,今天我们主要说说小程序的开发。

注册

开发微信小程序自然需要注册一个微信小程序,我们先进入 微信公众平台注册账号(如果有的话可以直接登录)

登录

当注册完成后就可以在微信公众平台上进行登录。

当登录之后可以设置一些小程序的详细信息、获取appid、配置服务器域名、

开发者工具

安装开发者工具

前往官网下载微信小程序开发者工具,这里提供了三个版本,我下载了预发布版。双击安装,安装完成后双击启动软件。然后进入登录页面,这里需要用微信扫码登录。

此处我们选择小程序,如果有打开过的工程就可以点击快捷图标打开。新建就选择空白进行新建。

左侧选择小程序,右边选择新建项目,如果没有AppID的时候可以选择测试号进行开发。后面注册了小程序号之后就可以在项目里面修改。同时也可选择导入已存在的项目。在这里我们选择新建项目并使用测试号。

微信开发者工具,主要分为三个部分,模拟器,编辑器,以及调试器。模拟器就是模拟手机页面,我们可以对程序进行观察和测试使用;编辑器是用来书写代码的区域;调试器是来调试查看程序。我们可以通过选择左上方的绿色按钮来打开或者关闭这几个操作的页面。编译、预览、真机调试、切后台、清缓存按钮完成对应的功能,上传按钮实现项目发布。

项目目录结构

小程序有四种类型的文件,分别是.wxml,.wxss,.js,.json 其中wxml,wxss看上去有点陌生,其实就是html,css,基本上没有发生大的变化。只是微信加了个自己的名称叫wx..。 所以wxml的功能就是写页面相关的dom结构,wxss写页面相关的样式,js写页面相关的逻辑,json就是配置文件。

小程序文件结构和传统web对比如下

结构 传统web 微信小程序
结构 HTML WXML
样式 CSS WXSS
逻辑 Javascript Javascript
配置 JSON

通过以上对比得出,传统web是三层结构。而微信小程序是四层结构,多了一层配置.json。

.wxml

wxml指的是Wei Xin Markup Language

其中比较常用的标签(组件):
view、text、icon、button、input、radio、slider、switch、textarea等常用组件。其中html中的一些标签比如div、span也是可以使用的。但是不推荐这样使用。

wxml语法参考

数据绑定

WXML 中的动态数据均来自对应 Page 的 data
数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:内容、组件属性、控制属性、关键字、运算、逻辑判断、数组、对象

内容
 {{ message }} 
Page({
  data: {
    message: 'Hello!'
  }
})
列表渲染

wx:for
在组件上使用wx:for 控制舒心绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
同时默认的数组的当前下表变量名为index.数组当前项的变量名默认为item。如果不想使用默认的名称可以自己进行定义。下面展示:

  1. 默认

  {{index}}: {{item.message}}

Page({
    data: {
      array: [{
        message: 'foo',
      }, {
        message: 'bar'
      }]
    }
  })
  1. 自定义

  {{idx}}: {{itemName.message}}

同时wx:for也是可以进行嵌套的。

条件渲染

wx:if
在小程序中常用wx:if="" 来判断是否需要渲染该代码块:

    1  

也可以同时使用wx:elif 和wx:else来控制

 1 
 2 
 3 
wx:ifhidden

微信小程序中也和vue中一样存在v-if和v-show的区别

因为 wx:if 之中的模板也可能包含数据绑定,所以当wx:if的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

模板

wxml提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用.