概述
微信小程序: mvvm+底层
用途: 微信公众号,微信订阅号,微信小游戏
编辑器:微信开发者工具。
步骤:准备 -> 开发 -> 审核 -> 交钱 -> 发布
一.开发前准备
1.申请微信公众号平台账号
https://mp.weixin.qq.com
2.添加开发者+项目组成员
管理 -> 成员管理
3.获取小程序id
通过小程序id创建项目
开发 -> 开发设置 -> 开发者id
4.安装微信开发者工具
文档 -> 工具 -> 微信开发者工具
5.登陆
选择的目录必须为空文件夹,demo01
二.目录结构组成
wxml:
基于html -> 更加类似于element-ui
封装了常用的html标签
wxss:
基于css
1.增加了相对单位rpx
2.只支持css中一部分常用选择器
js:
基于js:mvvm思想
只关心逻辑层
json(项目配置):
- 全局配置:
- app.json(根组件配置): pages,window
project.config.json:es6, node_modeuls
- app.json(根组件配置): pages,window
- 局部配置:
- 子页面配置会自动覆盖全局页面配置
三.创建页面
home:
home.wxml
home.wxss:
home.js
home.json
子文件内的文件名称必须和文件夹名称一致(添加页面路径后会自动生成同名文件夹和子文件)。
在app.json文件内配置pages,默认第一个pages为首页
四.逻辑层和视图层
1.数据绑定
基本数据绑定:
js:设置data,初始化数据。
html: 用{{}}引用。
双向数据绑定:
基础库版本在2.8.3之后都可以使用双向数据绑定。
model:value="{{msg}}"
2.列表渲染
wx:for="{{arr}}"//默认情况下,每一个数组元素名称为item,下标index
wx:for-item=“it”//给数组项起名字
wx:for-index=“in”//给数组下标起名字
wx:key=""
3.条件渲染
wx:if
wx:elif
wx:else
block: 承载子元素,但是不被编译(类似template)
4.事件绑定
bindxxx:
xxx:type
支持事件冒泡
小程序没有浏览器,不支持bom事件类型;没有鼠标,不支持鼠标点击事件
catchxxx:
不支持事件冒泡
5.组件
单标签要在开始标签中进行关闭,或者添加一个结束标签
<input/>
<input></input>
最后
以上就是谨慎战斗机为你收集整理的1.微信小程序的使用和基本介绍的全部内容,希望文章能够帮你解决1.微信小程序的使用和基本介绍所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复