微信小程序开发 小白入门篇

小程序内容简介

• 能够知道如何创建小程序项目
• 微信开发者工具的使用、appID 的获取
• 能够清楚小程序项目的基本组成结构 app.js、app.json、app.wxss、pages 文件夹
• 能够知道小程序页面由几部分组成 wxml、wxss、json、js
• 能够知道小程序中常见的组件如何使用 view、text、image
• 能够知道小程序如何进行协同开发和发布 成员管理、发布小程序、查看运营数据
  小程序与普通网页开发的区别
  1.运行环境不同

网页运行在浏览器环境中
小程序运行在微信环境中
2.API不同
.项目基本组成结构
pages 用来存放所有小程序的页面
utils 用来存放工具性质的模块 (例如:格式化时间的自定义模块)
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置文件
app.wxss小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信索引
基本语法
小程序的模板语法约等于vue的模板语法
1，文本渲染

{{ msg}}可以执行简单的js表达式
{{2+3}}
{{msg.length}}

2，条件渲染

wx:if=""
wx:elif=""
wx:else

``
**3，列表渲染`**

```java
wx:for="{{list}}"
wx:key="index"
	{{item}}
	{{index}}

4，自定义列表渲染

定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

wxss

默认单位是rpx
750rpx 等于一个屏幕的宽
375就是50%的宽

事件

bindInput     表单输入时
bindconfirm    表单输入确认
bindtap      点击时候

内置组件

view         组件块组件
text         组件行内组件
button       组件按钮
input        组件表单

<button data-msg="xxx" bindtap="tapHd">
获取事件的参数  e.target.dataset.msg

表单的绑定

<input value="{{s1}}" bindinput="inputHd">
inputHd(e){
 this.setData({s1:e.detail.value})
}
表单的值获取：e.detail.value