手把手教你学小程序

起源

​小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。

特点

1. 小程序是依赖微信
2. 快，应为免去下载和安装
3. 小，一个包不能超过2M
4. 强:微信有什么能力它也拥有
5. 广，传播微信圈子近10亿用户
6. QQ 微信 支付宝，字节跳动，美团，鸿蒙都有类似的小程序

官网

mp.wx.qq.com

小程序创建

1. 选择小程序存放的路径
2. 输入AppID
3. 选择不使用云服务器
4. 模板选择官方基础js模板

配置文件

pages

存放项目的页面，最前面的页面是默认页面，下图中默认页面是todo页面

window项目窗口

背景文字："backgroundTextStyle": "light",
导航栏背景颜色："navigationBarBackgroundColor": "#f31",
导航栏标题："navigationBarTitleText": "风雪",
导航栏文字颜色： "navigationBarTextStyle": "white"

小程序页面

page文件内容

home.js：业务逻辑

home.wxss：样式，页面内容样式

home.wxml：模板，写入页面内容

home.json：配置

小程序内置组件

<view>逻辑视觉分区（div）

<text>文本

<image>图片组件

<input>

<button>按钮

<switch>切换

<picker>选择

<icon>图标

<scroll-view>滚动区域

<swiper>  <swiper-item>幻灯片

页面配置

单独对某个页面的配置： "navigationBarTitleText"="基础语法"

tabBar底部栏的配置

"tabBar": {
    "color": "#484848",
    "selectedColor": "#16a5e7",
    "list": [{
      "pagePath": "pages/base/base",
      "text": "语法",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-h.png"
    }    
  ]
  },

1. color 文字末让颜色
2. selectColor 文字选中颜色
3. list 页面列表
4. pagePath页面地址
5. text文本
6. iconPath 图标地址
7. selectedIconPath 选中图标地址

模板语法

条件渲染

wx:if="{条件}"

多重条件渲染

wx:elif="{{多重条件}}"
wx:else

文本渲染

{{}}
属性的渲染
placeholder="{{msg}}"

列表渲染

<view wx:for="{{list}}" wx:key="index">{{index}}--{{item}}</view>

自定义列表

<view wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myindex" wx:key="myindex">
{{myindex}} --{{myitem}}</view>

<template>模板

定义
 

<template name="user"> 
     <view>用户名：{{uname}}</view>
</template>

导入
 

<import src="xxx"/>

只能导入template

使用
 

<template is="user" data="{{uname:'mumu'}}">

<include>引入

使用
<include src="xxx">
相当于把src内容拷贝一份放到当前位置（不能导入template）

事件

bindtap点击

bindcomfim 确认

bindchange表单值发生改变

bindinput表单输入

表单的双向绑定

<input value=“{{msg}}” bindinput=“changeHd”>

定义方法更新视图与data

function changeHd(e){
    //获取表单的值
   let msg = e.detail.value;
   // 更新视图和data
   this.setData({msg})
}

微信api

wx.stopPullDownRefresh()：停止下拉刷新

wx.showToast：提示

wx.request(url,methd,success(){})
网络请求，默认请求地址需要在后端配置，默认请求地址要求https

Page参数

1. data存储数据
2. onload() 当页面加载完毕
3. onPullDownRefresh 下拉刷新回调函数
4. onReachBottom 触底回调函数
5. 自定义方法

data与更新

1. js 里面方法data数据：this.data.msg
2. 在wxml使用：{{msg}}
3. 更新data与视图：this.setData({key:value,key2:value2})
4. 注意this指向，在wx.xxxapi里面this 的wx这个对象不是当前页面