微信小程序零基础入门（上）
目录
第一章、前言
1.1 小程序与网页开发的区别
1.2 首次开发小程序的准备工作
第二章、小程序基础结构了解
2.1 项目构成
2.1.1 项目的基本组成结构
2.1.2 小程序页面的组成部分
2.2 JSON配置文件
2.2.1 JSON配置文件的作用
2.2.2 新建小程序页面
2.2.3 修改项目首页
2.2.4 什么是WXML
2.2.5 什么是WXSS
第三章、小程序的宿主环境了解
3.1 宿主环境简介
3.2 通信模型
3.3 运行机制
3.4 组件
3.4.1 组件分类
3.4.2 常用的视图容器组件
3.4.3 常用的基础内容组件
3.4.4 常用的其他组件
3.5 API
第四章、WXML模板语法
4.1 数据绑定
4.2 事件绑定
第五章、WXML模板语法
5.1 条件渲染
5.2 列表渲染
第六章、配置
6.1 全局配置
6.1.1 window
6.1.2 tabBar
6.2 页面配置
6.3 网络数据请求
第一章、前言
该文章会将微信小程序内的一些文件结构、作用、以及小程序内的组件、语法等等都会做详细的赘述，同时我会类比为vue2让我们更加容易的理解小程序的知识。
1.1 小程序与网页开发的区别
(1)运行环境
·网页：运行在浏览器环境中
·小程序：运行在微信环境中
(2)API
因为运行环境的不同，所以在小程序中无法调用DOM和BOM的API;但是小程序可以调用微信程序提供的各种API，例如：扫码、支付、地理定位……
(3)开发模式
·网页：浏览器+代码编辑器
·小程序：有一套自己的开发模式——
- 申请小程序开发账号
- 安装小程序开发者工具
- 创建和配置小程序项目
1.2 首次开发小程序的准备工作
(1)注册登录小程序开发账号
微信公众平台
(2)登录成功后需要获取AppID
小程序
(3)下载安装微信开发小程序、扫码登录
·下载
微信开发者工具（稳定版 Stable Build）下载地址与更新日志 | 微信开放文档
·安装、首次创建微信小程序项目
微信小程序零基础入门【小程序的下载、安装与首项目配置】_❆VE❆的博客-CSDN博客
第二章、小程序基础结构了解
2.1 项目构成
2.1.1 项目的基本组成结构
· 根目录下的文件
（1）pages用来存放所有小程序的页面
（2）utils用来存放工具性质的模块(例如：格式化时间的自定义模块)
（3）app.js小程序项目的入口文件
（4）app.json小程序项目的全局配置文件
（5）app.wxss小程序项目的全局样式文件
（6）project.config.json项目的配置文件
（7）sitemap.json用来配置小程序及其页面是否允许被微信索引
2.1.2 小程序页面的组成部分
·pages目录中以单独的文件夹存在，每个页面由4个基本文件组成
（1）.js文件(页面的脚本文件，存放页面的数据、事件处理函数等等)
（2）.json文件(当前页面的配置文件，配置窗口的外观、表现等)
（3）.wxml文件(当前页面的模板结构文件) -- 类似html
（4）.wxss文件(当前页面的样式表文件) -- 类似css
2.2 JSON配置文件
2.2.1 JSON配置文件的作用
(1) JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。小程序中也一样：通过不同的.json配置文件，可以对小程序配置项目进行不同级别的配置
(2) 4种json配置文件
· 项目根目录中app.json配置文件 ---> app.json是当前小程序的全局配置，包括小程序的所有页面路径、窗口外观、界面表现、底部tab等等
-- pags:用来记录当前小程序所有页面的路径
-- window：全局定义小程序所有页面的背景色、文字颜色等
-- style：全局定义小程序组件所使用的样式版本
-- sitemapLocation：指明sitemap.json的位置
· 项目根目录中project.config.json配置文件； ---> 用来记录我们对小程序开发工具所做的个性化配置
-- setting中保存了编译相关的配置
-- projectname中保存的项目名称
-- appid中保存的是小程序的账号ID
·项目根目录中sitemap.json配置文件 ---> 微信已经开放了小程序内搜索，效果类似与pc页面的SEO。它是用来配置小程序页面是否允许微信索引
·每个页面文件夹中的.json配置文件 ---> 对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中的相同配置项
2.2.2 新建小程序页面
在根目录app.json --> pages中新增页面的存放路径（填写路径，微信小程序会自动创建基本页面的文件夹）
"pages":["pages/home/home","pages/message/message","pages/contact/contact"],2.2.3 修改项目首页
为了方便我们在开发中能看着对应页写代码，我们可以把将存放的路径放在首行，微信小程序就会展示放在首行路径对应的页面。
以上为例：我们直接展示的就是home页面
2.2.4 什么是WXML
(1)定义：WXML是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页的HTML。
(2)与HTML的区别:
· 标签名称不同
-- HTML:(div,span,img,a)
-- WXML:(view,text,image,navigator) --与上对应的
· 属性节点不同
-- HTML:
<a herf="#">超链接</a>-- WXML:
<navigator url="pages/home/home"></navigator>
· 提供了类似于Vue的模板语法（优先学习vue2）
-- 数据绑定
-- 列表渲染
-- 条件渲染
2.2.5 什么是WXSS
(1)一套样式语言，用于描述WXML的组件样式，类似于网页开发中的css
(2)WXSS与CSS的区别:
· 新增了rpx尺寸单位
-- 什么是rpx:可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。
公式：1rpx = （屏幕宽度）/ 750rpx
-- CSS:需要手动进行像素单位换算，例如rem
-- WXSS:在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算
· 提供全局样式和局部样式
项目根目录中的app.wxss会作用于所有小程序页面;局部页面的 .wxss 样式仅对当前页面生效
· WXSS仅支持部分CSS选择器
.class和#id、element(标签元素)、并集选择器，后代选择器、::after 和::before等伪类选择器/伪元素选择器
第三章、小程序的宿主环境了解
3.1 宿主环境简介
(1)什么是宿主环境:指的是程序运行所必须的依赖环境
(2)小程序的宿主环境:手机微信
(3)小程序宿主环境包括的内容：通信模式、运行机制、组件、API
3.2 通信模型
(1)小程序中通信的主体是渲染层和逻辑层
· WXML模板和WXSS样式工作在渲染层
· JS脚本工作在逻辑层
(2)小程序中的通信模型分为两部分：
·渲染层和逻辑层之间的通信——由微信客户端进行转发
·逻辑层和第三方服务器之间的通信——由微信客户端进行转发
3.3 运行机制
（1）小程序的启动过程
-- 把小程序的代码包下载到本地
-- 解析app.json全局配置文件
-- 执行app.js小程序入口文件，调用App（）创建小程序实例
-- 渲染小程序首页
-- 小程序启动完成
（2）页面的渲染过程
-- 加载解析页面的.json配置文件
-- 加载页面的.wxml模板和.wxss样式
-- 执行页面的.js文件，调用Page()创建页面的实例
-- 页面渲染完成
3.4 组件
官方组件库：视图容器 | 微信开放文档
3.4.1 组件分类
小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分成9大类——
（1）视图容器
（2）基础内容组件
（3）表单组件
（4）导航组件
（5）媒体组件
（6）map地图组件
（7）canvas画布组件
（8）开放能力
（9）无障碍访问
3.4.2 常用的视图容器组件
（1）view
-- 普通的视图区域
-- 类似于HTML中的div，是一个块级元素
-- 常用来实现页面的布局效果
-- 使用方法：
当成写页面时的div使用
（2）scroll-view
-- 可滚动的视图区域
-- 常用来实现滚动列表效果
-- 使用方法：
·添加 scroll-y 属性：允许在纵向上滚动
·添加 scroll-x 属性：允许在横向上滚动
使用竖向滚动时，必须给scroll-view一个固定的高度
.container{width: 100px;height: 150px;
}scroll-view的使用--需要给高度/宽度
<scroll-view class="container" scroll-y><view>A</view><view>B</view><view>C</view>
</scroll-view>（3）swiper和swiper-item
-- 轮播图容器组件和轮播图item组件
-- 使用方法：
两者搭配使用，在swiper-item中加入对应的轮播图内容
常用属性--
· indicator-dots显示指示点
· indicator-color指示点的颜色
· indicator-active-color当前指示点的颜色
· autopaly 是否自动切换
· interval自动切换的时间间隔
· circular是否采用衔接滑动
.swiper-contaner{height: 150px;
}
.item{height: 100%;line-height: 150px;text-align: center;
}
swiper-item:nth-child(1) .item{background-color: skyblue;
}
swiper-item:nth-child(2) .item{background-color: red;
}
swiper-item:nth-child(3) .item{background-color: greenyellow;
}<swiper class="swiper-container" indicator-dots><!-- 第一个轮播图 --><swiper-item><view class="item">A</view></swiper-item><!-- 第二个轮播图 --><swiper-item><view class="item">B</view></swiper-item><!-- 第三个轮播图 --><swiper-item><view class="item">C</view></swiper-item>
</swiper>3.4.3 常用的基础内容组件
（1）text
-- 文本组件
-- 类似于HTLML中的span标签，是一个行内元素
-- 使用方法：
可以通过text组件的selectable属性，实现长按选中文本内容效果
<view>手机号支持长按选中效果:<text selectable>1393294928</text>
</view>（2）rich-text
-- 富文本组件
-- 支持把HTML字符串渲染为WXML结构
-- 使用方法：
通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结果
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>3.4.4 常用的其他组件
（1）button
-- 按钮组件
-- 功能比HTML的button按钮丰富
-- 通过open-type属性可以调用微信提供的各个功能(客服、获取用户授权、获取用户信息等)
-- 使用方法：
<view>----------通过type指定按钮类型--------</view>
<button>默认按钮</button>
<button type="primary">主色按钮</button>
<button type="warn">警告按钮</button>
<view>----------size="mini"小尺寸按钮------</view>
<button size="mini">默认按钮</button>
<button size="mini" type="primary">主色按钮</button>
<button size="mini" type="warn">警告按钮</button>
<view>----------plain镂空按钮------</view>
<button size="mini" plain>默认按钮</button>
<button size="mini" type="primary" plain>主色按钮</button>
<button size="mini" type="warn" plain>警告按钮</button>（2）image
--图片组件
--image组件默认宽约300px,高度240px
-- 使用方法：
<view>----------image图片组件------</view>
<image style="border: 1px solid red;"></image>
<image src="/images/1.jpg"></image>
<image src="/images/1.jpg" mode="aspectFill"></image>
<image src="/images/1.jpg" mode="aspectFit"></image>
<image src="/images/1.jpg" mode="heightFix"></image>
<image src="/images/1.jpg" mode="widthFix"></image>-- image常用属性：
·scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
·aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来
·aspectFill 保持纵横比缩放图片,使图片的短边能完全显示出来
·widthFix 宽度不变，高度自动变化
·heightFix 高度不变，宽度自动变化
（3）navigator
-- 页面导航组件
-- 类似于html中的a链接
-- 使用方法：
<navigator url="/pages/index/index">我的index</navigator>3.5 API
微信开发文档API：基础 | 微信开放文档
（1）事件监听API
·特点：以on开头，用来监听某些事件监听的触发
·例子：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
（2）同步API
·特点1：以Sync结尾的API都是同步API
·特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错，会抛出异常
·例子：wx.setStorageSync('key','value')向本地存储写入内容
（3）异步API
·特点：类似jQuery中的$.ajax(options)函数，需要通过success、fail、complete接受调用结果
·例子：wx.request()发起网络数据请求，通过success回调函数接受数据
第四章、WXML模板语法
4.1 数据绑定
（1）数据绑定的基本原则(与vue的data用法相似)
-- 在data中定义数据
-- 在WXHL中使用数据
（2）在data中定义页面的数据
-- 在页面对应的.js文件中，把数据定义到data对象中即可
（3）Mustache语法格式
-- 把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。
-- 使用方法：
// 页面初始的数据
data:{info:'hello world',imgSrc:'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',randomNum:Math.random()*10,
},<view>{{info}}<image src="{{imgSrc}}"></image><view>{{randomNum}}</view><view>{{randomNum > 5 ? '数字大于5':'数字小于5'}}</view><view>{{randomNum*100}}</view>
</view>-- Mustache语法的应用场景：
· 绑定内容 -->展示
· 绑定属性 -->元素属性上，例如：src
· 运算（三元运算、算术运算等）
4.2 事件绑定
（1）小程序中常用的事件
| tap | bind:tap | 手指触摸后马上离开，类似HTML中的click事件 |
| input | bind:input | 文本框的输入事件 |
| change | bind:change | 状态改变时触发 |
===>bindtap的语法
-- 通过bindtap可以为组件绑定tap触摸事件(点击事件)
-- 在页面的.js文件中定义对应的事件处理函数(也就是方法)，事件参数通过形参event接收：
===>bindinput的语法
-- 通过bindinput，绑定文本框输入事件
--在在页面的.js文件中定义对应的事件处理函数
（2）事件对象的属性列表
事件回调触发的时候，会收到一个事件对象event，它的详细属性有：使用*event.xxxx*
| 属性 | 类型 | 说明 |
|---|---|---|
| type | string | 事件类型 |
| timeSteamp | Integer | 页面打开到触发事件所经过的毫秒数 |
| targe | Object | 触发事件的组件的一些属性值集合 |
| currentTraget | Object | 当前组件的一些属性值集合 |
| detail | Object | 额外的信息 |
| touches Array | Array | 触摸事件，当前停留在屏幕中的触摸点信息数组 |
| changedTouched Array | Array | 触摸事件，当前变化的触摸点信息的数组 |
===>targe与currentTraget的区别
-- targe：是触发事件的源头组件；
-- currentTraget：是当前事件所绑定的组件
（3）事件传参
-- 小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数
-- 解决:
· 为组件提供'data-*'自定义属性传参，其中 *代表的是参数的名字，其中不加{{}}传入的参数为字符串
<button type="primary" bindtap="btnTap2" data-info="{{2}}" data-info2="{{3}}" data-info3="4">传参{{Num}}</button>·在事件处理函数中，通过，*event.target.dataset.参数名*，获取具体的参数的值
btnTap2(e){console.log(e)this.setData({Num:this.data.Num+e.target.dataset.info})},（4）实现文本框和data之间的数据同步
-- 定义数据
-- 渲染结构
-- 美化样式
-- 绑定input事件处理函数
第五章、WXML模板语法
5.1 条件渲染
（1）wx:if --> (用法相当于vue中的v-if)
-- 使用*wx:if="{{判断语句}}"*来判断是否需要渲染该代码
-- 也可以搭配wx:elif和wx:else来添加判断
data:{type:1
}<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>（2）结合<block>(类似vue中的template)使用wx:if，一次控制多个组件
-- 如果一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性
<block wx:if="{{false}}"><view>view1</view><view>view2</view>
</block>（3）hidden(隐藏) -->(相当于vue中的v-show:true/false显示)
-- 在小程序中，直接使用hidden="{{判断语句}}"也能控制元素的显示与隐藏
//dispalay:block/none
<view hidden="{{!flag}}">条件为 true 的时候隐藏元素，否则显示</view>
//节点的创建与销毁
<view wx:if="{{flag}}">这是使用 wx:if 控制的元素</view>5.2 列表渲染
（1）wx:for -->(相当于v-for)
-- 默认情况下，循环项为索引用index表示，当前循环项用item
-- 通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
data:{arr: ['苹果', '华为', '小米']
}
<view wx:for="{{arr}}" wx:key="index">索引是：{{index}}，item 项是：{{item}}
</view>（2）可以自行针对索引index,item名进行修改：wx:for-index和wx:for-item
-- wx:for-index="idx"
-- wx:for-item="itemName"
data:{arr: ['苹果', '华为', '小米']
}
<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">索引是：{{idx}}，item 项是：{{itemName}}
</view>（3）wx:key的使用
-- 类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也指定唯一的key值，从而提高渲染的效率
data:{userList: [{ id: 1, name: '小红' },{ id: 2, name: '小黄' },{ id: 3, name: '小白' }]
}
<view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>第六章、配置
6.1 全局配置
6.1.1 window
（1）小程序中窗口组成部分
--nacigationBar：导航栏区域
--background：背景区域，默认不可见，下拉才显示
--页面主体区域：用来显示wxml的布局
（2）了解window节点常用的配置
-- 导航栏
| nacigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
| nacigationBarBackgroundColor | HexColor | #000 | 导航栏背景颜色 |
| nacigationBarTextStyle | string | white | 导航栏标题颜色，仅支持black/white |
-- 下拉背景区域
| backgroundColor | HexColor | #fff | 窗口的背景色 |
| backgroundTextStyle | string | dark | 下来loading的样式，仅支持dark/light |
-- 开启下拉刷新和上拉触底的距离
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
| onReachBottomDistance | Number | Number | Number 页面上拉触底时距页面底部的距离，单位为px |
6.1.2 tabBar
（1）tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换，分为：
-- 底部tabBar
-- 顶部tabBar
-- 注意：tabBar中配置项：最少2个、最多5个的tab页签
-- 当渲染顶部tabBar时，不显示icon,只显示文本
（2）tabBar的6个组成部分
-- backgroundColor:tabBar的背景色
-- selectedIconPath:选中时图片路径
-- borderStyle：tabBar上边框的颜色
-- iconPath：未选中时的图片路径
-- selectedColor：tab上的文字选中时候的
-- color:tab上文字的默认(未选中)颜色
（3）tabBar节点的配置项
| 属性 | 类型 | 必填 | 默认值 | 描述 |
| position | string | 否 | bottom | tabBar的位置，bottom/top |
| borderStyle | string | 否 | black | tabBar上边框的颜色，black/white |
| color | HexColor | 否 | tab上文字的默认（未选中）颜色 | |
| selectColor | HexColor | 否 | tab上文字选中的颜色 | |
| backgroundColor | HexColor | 否 | tabBar的背景色 | |
| list(重点) | Array | 是 | tab页签的列表，2-5个 |
（4）list每个tab项的配置选项
| pagePath | string | 必填 | 页面路径，页面必须在pages中预先定义 |
| text | string | 必填 | tab上显示的文字 |
| iconPath | string | 非必填 | 未选中时图标路径，position为top时，不显示icon |
| selectedIconPath | string | 非必填 | 未选中时图标路径 |
//全局配置中配置tabBar的选项
"tabBar": {"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "/images/tabs/home.png","selectedIconPath": "/images/tabs/home-active.png"},{"pagePath": "pages/message/message","text": "消息","iconPath": "/images/tabs/message.png","selectedIconPath": "/images/tabs/message-active.png"},{"pagePath": "pages/contact/contact","text": "联系我们","iconPath": "/images/tabs/contact.png","selectedIconPath": "/images/tabs/contact-active.png"}]},6.2 页面配置
（1）页面配置的作用
-- 小程序中，每个页面都有自己的.json配置文件，用来对当页面的窗口外观、页面效果等进行配置。
（2）页面配置和全局配置的关系
--小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现
--如果某些小程序页面，想要拥有特殊的窗口表现，此时需要是使用页面级别的.json配置文件
--页面配置与全局配置冲突时，就近原则
（3）页面配置中常用的配置项
与6.1.1 windows常用配置项相同
6.3 网络数据请求
（1）小程序中网络数据请求的限制
·两个限制：
-- 只能请求HTTPS类型的接口
-- 必须将接口的域名添加到信任列表中
（2）如何配置request合法域名
配置步骤：登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名
（I）
（II）
(III)
（3）发起GET请求
·调用微信小程序提供的wx.request()方法，可以发起GET数据请求:
·wx.request()的常用api,如下：
wx.request({//开发者服务器接口地址url: 'https://……/api/get',//HTTP 请求方法method:'GET',//请求的携带参数data:{name:'李四',age:23},//设置请求头header: {'content-type': 'application/json' // 默认值},//接口调用成功的回调函数success:(res) =>{console.log(res)console.log(res.data)},//接口调用失败的回调函数fail:(err) =>{console.log(err)},//接口调用结束的回调函数（调用成功、失败都会执行）complete:(res,err) =>{console.log(res,err)},
})（4）发起POST请求
· 调用微信小程序提供的wx.request()方法，可以发起POST数据请求：
wx.request({url: 'https://……/api/post',method:'POST',data:{name:'李四',age:23},success:(res) =>{console.log(res)}
})（5）跳过request合法域名校验
-- 如果后端程序员只提供了http协议的接口，没有提供https协议接口
-- 解决：详情->本地设置->勾选：不校验合法域名....
（6）关于跨域和Ajax的说明
-- 跨域问题只存在于基于浏览器Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题
之后内容接下：
微信小程序零基础入门（下）_❆VE❆的博客-CSDN博客
微信小程序零基础入门（上）相关推荐
- 知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言 微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
- 微信小程序零基础入门_第一章 小程序和开发者工具的介绍
第一章 小程序和开发者工具的基本介绍 1.1 小程序的开发工具 微信小程序的开发者需要先通过微信公众平台注册开发者账号.在微信公众平台网页中的账号分类->小程序中有着较为详细的注册介绍,可以较为 ...
- 微信小程序零基础入门_第二章 小程序框架_逻辑层
第二章 小程序框架_逻辑层 2.1 逻辑层 小程序开发框架的逻辑层是基于JavaScript进行编写和实现的.在开发过程中写的所有代码,最终都被整合成一份JavaScript,在小程序启动的时候开始执 ...
- 微信小程序零基础入门【小程序的下载、安装与首项目配置】
目录 第一步.注册小程序开发账号 第二步.下载并安装微信小程序 第三步.首次创建小程序 第一步.注册小程序开发账号 (1)点击注册按钮 微信公众平台 点击该链接进入微信公众号平台,点击右上角注册按钮, ...
- 【微信小程序-0基础入门】相关介绍和账号注册
写在前面: 本篇内容,主要介绍小程序的"相关知识"以及"如何注册微信小程序"账号.后续内容会慢慢教大家如何一步步写出属于自己的小程序. 目录 1.小程序是什么? ...
- 微信小程序开发基础入门笔记
文章目录 vsc 安装插件(小程序开发助手-微信小程序开发助手) 日常注意: 微信小程序WXS模块的使用 框架 1小程序结构和传统的web结构 2 基本的项目目录 3全局配置app.js 4.运算 = ...
- 微信小程序中基础入门
一.数据绑定 1.数据绑定的基本原则 ① 在data中定义数据(在.js文件) ② 在wxml中使用数据 2.Mustache语法的格式 把data中的数据绑定到页面中进行渲染,使用MUstache语 ...
- 微信小程序零基础快速入门
一.小程序开发资源介绍 此部分内容介绍一些现有的项目,可以下载下来学习,看看别人开发如何使用各个组件,如何美化各个页面. ①小程序官方demo ②网友整理资源1 ③网友整理资源2 ④下面为UI组件库 ...
- 情侣积分微信小程序零基础开发教程（附代码及开发指南）
To Our Loves 本文最新版本 0 情侣积分互动小程序 在idofSunChonggao 的基础上进行开发, 感谢! 且感谢初版(UxxHans)! ⭐ 如果本仓库对您有所帮助,您的fork或 ...
最新文章
- python输入输出-6、Python 输入输出
- 【正一专栏】再见小马哥——永记你含着泪的笑
- go切片的定义及make使用
- java写入txt文件 不替换_java非覆盖写入文件及在输出文本中换行
- MFC多线程各种线程用法 .
- Activiti之H2
- 【论文翻译】HeteSim：异构网络中相关性度量的通用框架
- python requests cookie_python requests 带cookie访问页面
- PyQt5学习笔记（二） 文本控件及使用
- matlab 数字字母,MATLAB读取txt（包含字母和数字）
- Python练习之购物车
- Adobe Flash Player32 离线安装包及菁苗软件打开白屏的解决方法
- mysql双机备份最简单_简单实现mysql双机热备份
- ignite java,Ignite 之计算运用的 Hello world
- QA问答系统中的深度学习技术实现
- C语言中惰性,利用C-H键活化接力（CHAR）实现惰性C-H的功能化
- Mysql 更改用户名密码
- 【PPT】PPT设计丨1.实用功能丨
- Vue-创建组件时报错：Component names should conform to valid custom element name in html5 specification.
- 赶紧投入es6的怀抱吧