微信开发者安装教程 微信开发者版

定义

        微信里面的app，2016年推出的，

        竞品：支付宝小程序，钉钉，美团，头条，抖音qq小程序

优点

• 在微信自由分享
• 不用下载app
• 能快速的开发，使用微信的api接口

开发者

• 内存，源码，图片，存储，接口与数据都有限制

界面介绍

项目组成

 app.json

pages注册页面

window窗口信息

新建页面

• 在pages文件夹右键建立新的文件夹
• 在文件中右键新建页面
• 哪个page在最上面，默认显示哪页
• json要求严格语法，不能有多余的注释和逗号

注意设置（勾选不校验合法域名）

页面组件pages/home

home.wxml 模板文件	home.js 业务逻辑
home.wxss 样式	home.json 页面配置

标签

输入框：input

按钮：button

• 按钮的样式类型：type

• 警告：warm
• 白色（默认）：default
• 主要绿：primary

• 按钮是否镂空，背景透明（默认是false）：plain="{{true}}"
• 是否警用：disabled     (类型：boolean   默认值：false)
• 按钮大小：size

• 默认大小：default
• 小尺寸：mini

图片：image

• 图片资源地址：src
• 缩放模式：mode

文本：text

• 中文字符空格一半大小：ensp
• 中文字符空格大小：emsp
• 根据字体设置的空格大小：nbsp

逻辑分区：view

富文本：rich-text

• 富文本内容：nodes

小程序的模板语法（约等于vue的模板语法）

文本渲染

• 普通：{{msg}}
• 富文本：<rich-text nodes="{{富文本内容}}"></rich-text>
• 可以执行简单的js表达式

• {{2+3}}简单的运算
• {{msg.length}}文字的长度

条件渲染

wx:if="{{条件}}"	wx:elif="{{多重条件}}"
其它条件：wx:else	{{条件？真表达式：假表达式}}

 条件渲染：

多重条件渲染 ：

列表渲染（循环）

•  循环遍历：字符串、数组、数字
• <view wx:for="{{列表}}" wx:key="index">{{index}} --{{item}}</view>

wx:for="{{list}}"	当前被遍历的元素：{{item}}
wx:key="index"	当前被遍历元素的下标{{index}}

 遍历九九乘法表

<scroll-view scroll-x="true">
<view wx:for="{{10}}" wx:for-item="i" class="wrap">
<view class="row">
  <text wx:for="{{10}}" wx:for-item="j" wx:if="{{j>0&&j<=i}}" wx:key="j">
  {{j+"x"+i+"="+i*j}}
  </text>
</view>
</view>
</scroll-view>

• 自定义列表渲染

• 定义item与index的名称，wx:for-item="自定义项"     wx:for-index="自定义下标"

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

• 导入（不常用）

• import

• 只能导入template内容
• template/utils.wxml

<template name="userCart">
  用户名：{{name}}
</temlate>

• home.wxml

<import src="/template/utils.wxml">

<tempate is="userCart" data="{{...u1}}">

• include

• 只能导入非template内容
• template/foot.wxml

<view>{{内容}}</view>

• home.wxml

<include src="/template/foot.wxml">

内置组件

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

wxss样式

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

事件

bindInput 表单输入时	bindcomfirm 表单输入确认(回车)
bindtap 点击时候	bindchange发生变化

事件响应：<view bindtap="say"></view>

事件的传参

• 1、<button data-msg="被传递的参数" bindtap="tapHd"> 
  
• 获取事件的参数  e.target.dataset.msg
• 2、<button bindtap="say" data-str="被传递的参数"></button>
• say(e){let str = e.target.dataset.str || '你好啊' wx.showToast({title:str})}

表单的绑定

<input value="{{s1}}" bindinput="inputHd">

inputHd(e){
   this.setData({s1:e.detail.value})
}

 表单的值获取：e.detail.value

表单的双向绑定

//xxx.wxml文件
<view class="title" >表单双向绑定</view>
<input type="text" placeholder="请输入内容" model:value="{{msg}}" bindinput="inputHd"/>
<view>{{msg}}</view>


//xxx.js文件
  inputHd(e){
    var val= e.detail.value;
  },

内置的api

• 显示提示：wx.showToast(title,icon)
• 本地存储：wx.setStorageSync(key,value)
• 本地取：wx.getStorageSync(key)
• 网络请求：wx.request ({url,method,success,fail})

生命周期

• onLoad 页面加载完毕
• onPullDownRefresh 下拉刷新
• onReachBottom 触底更新

页面配置

"enablePullDownRefresh": true,  允许下拉刷新
"backgroundTextStyle": "dark",  背景文字颜色
"backgroundColor":"#f70", 背景颜色
"usingComponents": {} 组件

wxs语法

• <wxs module="fn" src="xxx.wxs">module.exports={filter:function(){}}</wxs>
• {{fn.filter(list,true)}}

小程序的限制

• 源文件大小

• 每个包不能超过2M
• 总共不能超过16-20M

• 页面缓存堆栈5层
• 底部栏

• 最少2个最多5个
• 底部栏图片31k

• 本地存储

• 1次1M 最多100M

• setData

• 不能超过1M

• 功能和微信一致（右上角胶囊按钮，下拉刷新）

小程序的页面的跳转

• 组件跳转<navigator>

• url 跳转的地址
• open-type 打开类型

navigate 普通跳转	navigateBack 返回
redirect 重定向	switchTab 跳转底部栏
reLaunch 重启

• api跳转

wx.navigateTo  跳转	wx.switchTab  切换底部栏
wx.redirect 重定向	wx.reLaunch 重启

页面栈

•   通过 open-type = "navigate" 页面会缓存起来  最多缓存5层  
• A页面->redirect B页面
  A页面是不会被缓存    
• E 页面  "navigateBack" 到 D页面   （页面的缓存移除一次）
• 总结：

• navigate会增加一层缓存页面
  redirect 会替换一层缓存页面
  navigateBack 会移除一层缓存页面

页面传参

• 小程序页面传参主要通过 查询传参
• 传：url=“xxxx/xxx?name=mumu&age=18”
• 接收：onLoad options参数接收

• options.name
  options.age

全局数据

• app.js的globalData

• 定义：app.js的globalData
• 页面使用

• var app  = getApp();
• app.globalData.num

封装request

1. 定义baseURL
2. 添加请求头
3. 添加加载提示
4. 同一错误处理

npm安装包

• 初始化项目步骤

就会直接进入到这个页面      如下图 

开始初始化项目 

安装插件

app.json删除v2

修改project.config.js

工具，构建npm

导入组件

使用组件