为什么选择开发微信小程序？

回答：

文章目录

1.理解与创造 1.1理解

用人的话来说就是：导航栏

以下是优质UP主详细属性总结：

最常用的是：，

1.2 创建

1.打开app.json文件

2.打开微信公众平台

3.将官方格式复制到app.json中

4.打开平台，找到相关属性配置

2. 常见wxml标签介绍 1.1 -view

在微信小程序中，view标签用于布局，相当于HTML中的div。

您可以使用属性来指定一个或多个样式类，并使用属性来编写内联样式。

1.2 轮播图控制-

使用小程序中的组件创建滑块视图

它必须与 -item 滑块一起使用。

<view> /**/ <swiper autoplay="true" interval="3000" circular="true"> <swiper-item> <image src="/images/1.jpg" class="slide-image"/> swiper-item> <swiper-item> <image src="/images/2.jpg" class="slide-image"/> swiper-item> swiper> view>

:是否自动播放

：下一个滑块之间的时间长度

：是否连接滑动

1.3 多选控制图标

<icon type="success" size="23">icon> <icon type="circle" size="23">icon>

type为必选属性，用于控制是否选择

选中未选中

size 用于定义图标大小

请点击此处了解图标的详细属性。

1.4 跳跃-

类似于HTML中的a标签

用于跳转页面——可以传递参数（后面会详细介绍）

<navigator url="跳转的页面路径" > 点击跳转到目标页面 navigator>

3. 理解和使用模板和模块 1.1 模板-

模板可以理解为外包公司的产品。在此之前，我们都是自己经历了这个过程。有了它之后，它精致的框架和风格我们就可以直接使用，不仅方便还省去了很多工作。实力堪称人类之星！

1.1.1 为什么需要模板？

（模板）：主要用于展示。简单来说，主要是用来嵌入wxml代码。模板可以有对应的样式和逻辑，但是没有对应的js文件。其逻辑取决于参考。页。

1.1.2 如何使用模板？

导入模板框架

<import src="../../template/priductlist/priductlist.wxml"/> <template is="模板名称" data="{{item}}">template>

导入模板样式

@import '../../template/priductlist/priductlist.wxss';

1.2 模块 1.2.1 为什么需要模块？

将复杂的应用分解为一系列独立的模块，每个模块负责完成特定的功能或业务逻辑。

可以理解为NFC，“嘀”一声即可完成“开灯”命令。

1.2.2 如何创建模块？

和我们创建的js文件是一样的，只不过我们在js文件中安装了需要调用的具体数据，并给它起了一个新的名字“xx模块”

下面的例子用于存储固定数据

你可能会问，为什么要单独保存呢？

其实更多的是为了简化代码页，方便编写，方便后续的数据修改。

var list=[{ id:1, type:0, imgUrl:"../../images/item1.jpg", title:"美容养颜" },{ id:2, type:1, imgUrl:"../../images/item2.jpg", title:"保健调养" }] module.exports={ list:list }

与普通的js文件相比，模块最重要的是

公开列表数组

.={列表:列表}

这样外部文件就可以随时调用它

1.2.3 如何使用模块？

导入模块

require(“…/…/comment/typedata.js”);

使用模块

var myData=require("../../comment/typedata.js"); Page({ data: { typeData:myData.list,//分类导航数据 } })

4.如何绑定和修改数据？ 1.1 定义数据

小程序中的数据是一个对象

页面涉及到的所有变量都必须在data中定义

Page({ data:{ ipOpen:true, name:olive } })

1.2 绑定数据

内容绑定：

<view>{{属性名}}view> <view>{{item}}view>

属性绑定：

<input value="{{属性名}}"/> <input value="{{item}}"/>

1.3 数据修改

通常我们在获取有效数据的时候，需要对原始数据进行追加或者用有效数据进行替换。这时候我们就需要用到数据修改，这是很常用的。

this.setData({ list:list })

点击此处查看详细使用方法

1.4 事件绑定

常用的事件类型：点击()、长按()、输入()、表单提交()、滚动到底部()和选择器改变()

举个栗子：

<view class="list {{isTouchMove?'touch-move':''}}" bindtouchstart="touchstart" bindtouchmove="touchmove" >

手指触摸事件

手指触摸移动事件

1.5 选择器的三元表达式

<view class="list {{isTouchMove?'touch-move':''}}">view>

翻译：在选择器为list的元素中进行搜索，如果为true则添加'-move'样式到列表中，如果是则添加“”（空）

5.如何将数据渲染到页面？ 1.1 条件渲染

有条件绑定数据

使用此属性确定是否对当前组件进行数据绑定。

<view wx:if="age>40">1view> <view wx:elif ="age==40">2view> <view wx:else>3view>

1.2 列表渲染

可以理解为for循环

不断遍历一个数组，通过{{}}将其内容输出到页面

<view class="item" wx:for="{{showData}}"> <view class="td"> {{item.MTId}} {{item.status}} view> view>

6.如何实现页面跳转参数传递？ 1.1 拼接URL参数并传递 1.1.1 URL传递参数

利用标签

标签+URL地址+参数

url=“…/…/?id=3”

1.1.2 小程序api参数传递

为容器定义绑定事件

触发时，将参数data-id=3传递给js

wx。 +URL地址+参数

url=“…/…/?id=3”

tiao:function(e){ wx.navigateTo({ url: '../indexDetail/indexDetail?id='+e.currentTarget.dataset.id, }) },

1.1.3 实现跳转的几种方法 1.2 全局变量参数传递 1.2.1 什么是全局变量？

顾名思义：全局作用的变量

当一个变量在多个页面使用时，为了调用方便，我们会选择将其定义为全局变量

1.2.2 使用方法

定义

//app.js App({ globalData: {//全局变量 city:广州 } })

使用

var app=getApp(); app.globalData.city=city

1.3 本地存储参数传递 1.3.1 什么是本地存储？

顾名思义：数据存储在本地（永久保存）

当我们需要在小程序页面永久保存一条数据时，我们会使用本地存储

1.3.2 使用方法

wx.setStorageSync("key","value")//设置本地存储 wx.getStorageSync("key")//获取本地存储 wx.removeStorageSync("key")//删除本地存储 wx.clearStorageSync("key")//清空本地存储

7、如何获取数据？

wx.({ })