手把手教你搭建小程序

一.下载地址

微信小程序，检查小程序，英文名mini program 是一种不需要下载安装即可使用的应用，

注册地址:微信公众平台

下载开发工具地址：稳定版 Stable Build | 微信开放文档

二.获取AppID

 

 

三.第一个小程序

3.1下载并开发

 下载开发工具地址：稳定版 Stable Build | 微信开放文档

 3.2登录微信开发工具 

  3.3新建小程序项目

 3.4填写项目信息

 

 3.5成功 

 4.微信开发者工具介绍

 五.小程序结构目录

小程序框架的目标是通过尽可能简单，搞笑的方式让开发者可以在微信中开发具有原生App的体验服务，提供了自己视图层描述语言.WXML和WXSS，以及.javascript，并在视图层与逻辑层间提供了数据传输和事假系统

六.数据绑定

写法：在.js文件data里面定义数据 写逻辑代码

 在.wxml 里面使用两个{ {}}来表达值

 

七.渲染列表

wx:for

同样如上图一样  跟vue 的表达式一样

wx:key 用来提高数组渲染的性能

 

 

 

八.小程序事件绑定

小程序中绑定事件，通过bind关键字来实现。如 bindtapbindinputbindchange 等

不同的组件支持不同的事件，具体看组件的说明即可。

8.1. wxml

<input bindinput="handleInput" />

8.2.page

Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
  }
})

8.3 特别注意

(1)绑定事件时不能带参数 不能带括号 以下为错误写法

<input bindinput="handleInput(100)" />

(2)事件传值 通过标签自定义属性的方式 和 value

<input bindinput="handleInput" data-item="100" />

(3)事件触发时获取数据

   handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // 输入框的值
   console.log(e.detail.value);
  }

九.样式 WXSS

与css相比，WXSS扩展的特性

• 响应式长度单位rpx
• 样式导入

9.1单位尺寸

rpx(responsive pixel) :可以根据屏幕的宽度进行自适应，规定品目宽为750px 如在iphone6上 屏幕宽度为375px 共有750个物理像素，

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iphone5	1rpx = 0.42px	1px = 2.34rpx
iphone6	1rpx = 0.5px	1px = 2rpx
iphone6 plus	1rpx = 0.552px	1px = 1.81rpx

十.常见组件

10.1. view

代替原来的div标签

 <view hover-class="h-class">
  点击我试试
  </view>

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

十一.小程序的生命周期

分为应用生命周期和页面生命周期

11.1 应用生命周期

属性	类型	默认值	必填	说明
onLaunch	function		否	监听小程序初始化。
onShow	function		否	监听小程序启动或切前台。
onHide	function		否	监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。

11.2页面生命周期

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function	当前是 tab 页时，点击 tab 时触发

11.3 页面声明周期图解