微信小程序基础

微信小程序基础

• 首先下载微信开发者工具
• 安装后创建小程序，分析一下里面的各个文件的作用
• 新建项目
  页面介绍
  项目组成
  新建页面
  • 在pages文件夹右键建立新的文件夹
  • 在文件中右键新建页面
  • 哪个page在最上面，默认显示哪页
  • json要求严格语法，不能有多余的注释和逗号
    特别注意
    

页面组件

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

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

• wxss
  默认单位是rpx
750rpx 等于一个屏幕的宽
375就是50%的宽
• 内置组件
  view组件 块组件
  text 组件 行内组件
  button组件 按钮
input组件 表单
  从中我们可以发现<view></view>标签段标签，相当于HTML中的div，而<text></text>相当于sapn
• 文本渲染
  {{ msg}}
• 可以执行简单的js表达式
  {{2+3}}
{{msg.length}}
• 条件渲染
  wx:if=""
wx:elif=""
wx:else
• 列表渲染
  wx:for="{{list}}"
wx:key="index"
{{item}}
{{index}}
• 自定义列表渲染
  定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}
  wx:for-item , 数组当前项的变量名,默认为 item
  作用：使用 （当前项变量名.属性名） 取得属性值
  wx:for-index, 数组的当前项的下标变量名 , 默认为 index
  wx:key 来指定列表中项目的唯一的标识符。
  作用：希望列表中的项目保持自己的特征和状态
• 导入（不常用）
  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">
• home.js

    data: {
        u1:{name:"张张张",age:"18"},
        u2:{name:"李立立",age:"28"},
        list:["react","vue","小程序"],
        score:55,
        isLog:false,
        msg:"你好，腾讯"
    },

• home.wxml

<!--pages/home/home.wxml-->
<view class="title">使用include导入 非template的模板内容</view>
<include src="/template/foot"></include>
<include src="/template/foot"></include>
<view class="title">import导入</view>
<import src="/template/utils.wxml"></import>
<template is="userCart" data="{{...u1}}"></template>
<template is="userCart" data="{{...u2}}"></template>
<view class="title">自定义列表渲染</view>
<view wx:for="{{list}}" wx:key="index" wx:for-item="myitem" wx:for-index="myindex" wx:key="myindex">
{{myindex+1}}{{myitem}}
</view>
<view class="title">列表渲染</view>
<view wx:for="{{list}}" wx:key="index">
{{index+1}}{{item}}
</view>
<view class="title">多重条件渲染</view>
<view wx:if="{{score>=90}}">小汽车</view>
<view wx:elif="{{score>=80}}">摩托车</view>
<view wx:elif="{{score>=70}}">电动车</view>
<view wx:elif="{{score>=60}}">自行车</view>
<view wx:else>打一顿</view>

<view class="title">条件渲染</view>
<view wx:if="{{isLog}}">欢迎回来</view>
<view>请先登录</view>
<view class="title">文本渲染
    {{msg.length}}
</view>
<view>{{msg.length>8?'大于':'小于'}}</view>
<view class="title">组件2</view>
<text>文本1</text>
<text>文本2</text>

效果

事件

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

事件的传参

<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

<view>表单绑定</view>
<input value="{{s1}}" class="inp" bindinput="inputHd"></input>
<button type="primary">{{s1}}</button>
<!-- bindinput输入框事件 -->
<!-- bindconfirm确认事件 -->
<!-- bindtap点击事件 -->
<button type="primary" size="mini">你好</button>
<button type="default" size="mini" bindtap="tapHd">你好</button>
<button data-msg="中国" type="primary" bindtap="sayHi">事件传参A</button>
<button data-msg="家乡" type="warn" bindtap="sayHi">事件传参B</button>
<navigator open-type="navigate" url="/pages/nav/nav">返回</navigator>

 data: {
        s1:"小程序很简单",
        name:"",
        age:"",
    },
    inputHd(e){
        //获取表单的值
        var s1 = e.detail.value;
        //更新data的值与视图
        this.setData({s1})
    },
    // 事件传参
    sayHi(e){
        console.log(e);
        var msg = e.target.dataset.msg
        wx.showToast({
          title: '你好'+msg,
        })
    },
    tapHd(e){
        //输出事件
        console.log(e);
        //提示文本
        //wx开头的方法，内置api
        wx.showToast({
          title: '你好，朋友',
        })
    },

获取笑话案例

• 生命周期
  onLoad 页面加载完毕
onPullDownRefresh 下拉刷新
onReachBottom 触底更新
• 页面配置
  "enablePullDownRefresh": true, 允许下拉刷新
"backgroundTextStyle": "dark", 背景文字颜色
"backgroundColor":"#f70", 背景颜色
"usingComponents": {} 组件
• 更新数据与视图
  this.setData({k:v})

data: {
        joks:[], //数组笑话
        page:1,  //当前页
        type:1,
    },
    getJoke(type=1){
        var that = this; //缓存this
        var joks = this.data.joks;  //获取到原来的joks
        var page = this.data.page;
        wx.request({
          url: 'http://dida100.com/mi/list.php?page='+page,
          success(res){
            //把请求到的数据与现有数据joks连接起来
            //如果type值为1，咱们就下拉刷新
            if(type==1){
                //把数据更新到前面
            joks = res.data.result.concat(joks);
            //显示加载提示
            wx.showToast({
              title: '新加载'+res.data.result.length+"条笑话",
              icon:"none"
            })
            // 停止下拉刷新
            wx.stopPullDownRefresh();
        }else{
            //把更新的数据加载到后面
            joks = joks.concat(res.data.result);
        }
            //更新joks和page
            that.setData({joks,page:page+1})
          }
        })
    },
    onLoad(options) {
        //获取笑话
        this.getJoke();
    },

渲染

<view class="list">
<view class="item" wx:for="{{joks}}" wx:key="index">
    {{item.summary}}
    </view>
</view>

实现“todolist案例”

• 设计数据list存储数据
  { done:true,是否完成 title：”“显示的文本 }
• temp
  和输入框进行双向绑定的临时数据
• 方法
  添加
删除

	 data: {
        temp:"",  //和输入进行绑定临时数据（用来添加）
        list:[{title:"学习vue",done:true},{title:"学习小程序",done:false}]
    },
    //删除列表
    delTodo(e){
        // 获取item
        var item = e.target.dataset.item;
        // 获取当前list
        var list = this.data.list;
        // 查找下标
        // 当回调函数返回true的时候
        // findIndex返回当前列表的下标
        var ind = list.findIndex(value=>value.title==item.title);
        //删除
        list.splice(ind,1);
        //更新数据
        this.setData({list})
        wx.setStorageSync('list', this.data.list)
    },
    //添加到列表
    addTodo(){
        //获取原来列表
        var list = this.data.list;
        //添加一个对象
        console.log(this.data.temp);
        list.unshift({
            dont:false,
            title:this.data.temp,
        })
        //更新数据
        this.setData({list,temp:''});
        wx.setStorageSync('list', this.data.list)
    },
    inputHd(e){
        //实现双向绑定
        this.setData({temp:e.detail.value})
    },
    onLoad(options) {
        //获取
       var list =  wx.setStorageSync('list')||[];
       //更新列表数据
       this.setData({list})
    },

渲染

<input type="text" bindinput="inputHd" bindconfirm="addTodo" value="{{temp}}" placeholder="请输入要添加的计划" />
<view>
    <!-- 展示列表 -->
    <view class="item" wx:for="{{list}}"
    wx:key="title">
    <switch type="checkbox" checked="{{item.done}}"></switch>
    <text>{{item.title}}</text>
    <text bindtap="delTodo" data-item="{{item}}">×</text>
    </view>
</view>

小程序的限制

• 源文件大小
  • 每个包不能超过2M
  • 总共不能超过16-20M
• 页面缓存堆栈5层
• 底部栏
  • 对多5个最少2个
  • 底部栏图片31K
• 本地存储
  • 一次1M，最多100M
• setDate
  • 不能超过1M

底部栏tabBar的配置在app.json

 "tabBar": {
        "color": "#777", //默认颜色
        "selectedColor": "#1cb9ce",  //选中颜色
        "list": [{
            "pagePath": "pages/nav/nav", //跳转地址
            "text": "跳转",  //文字
            "iconPath": "./images/t1.png",  //未选中时的照片
            "selectedIconPath": "./images/t1-h.png" //选中时的照片
        },
        {
            "pagePath": "pages/todo/todo",
            "text": "计划",
            "iconPath": "./images/t2.png",
            "selectedIconPath": "./images/t2-h.png"
        }
    ]
    },

小程序的页面跳转

• 组件跳转
  • <navigator>
    • url 跳转的地址
    • open-type 类型有↓
      • 1
• api跳转
  • wx.navigateTo 跳转
  • wx.switchTab 切换底部栏
  • wx.redirect 重定向
  • wx.reLaunch 重启

<view style="padding: 30rpx;">
<button size="mini" type="primary" bindtap="goEvent" data-type="navigate">跳转到event</button>
<button size="mini" type="warn" bindtap="goEvent" data-type="redirect">跳转到event（替换）</button>
</view>
<view>
    <navigator open-type="navigate" url="/pages/event/event">事件event</navigator>
    <navigator open-type="redirect" url="/pages/event/event">跳转并替换</navigator>
    <navigator open-type="reLaunch" >重启 </navigator>
    <navigator open-type="navigateBack">返回 </navigator>
</view>
<!-- 跳转底部栏 -->
<navigator open-type="switchTab" url="/pages/todo/todo">计划</navigator>

 * 页面的初始数据
     */
    data: {

    },
    goEvent(e){
        //获取到传参的参数type
        var type = e.target.dataset.type;
        //如果type值是redirect 替换跳转
        if(type=="redirect"){
            wx.redirectTo({
              url: '/pages/event/event',
            })
        }else{
            //否则就普通跳转
            wx.navigateTo({
              url: '/pages/event/event',
            })
        }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        //更新导航栏的标题
        wx.setNavigationBarTitle({
          title: '导航与跳转',
        })
    },

页面栈

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

页面传参

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

封装request

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

//基础的url
const URL = {
    baseURL:"http://dida100.com"
}
function tansParam(obj){
    var str = "";
    for(var k in obj){
        str+=k+"="+obj[k]+"&";
    }
    // 移除最后一个&
    return str.slice(0,-1);
}
function request(option){
    var url = option.url;
    //01 可以添加baseURL
    // 是不是以http开头的，是用url，不是加上baseURL
    url = url.startsWith("http")?url:URL.baseURL+url;
    //选项里面有params（get传入的参数）
    if(option.params){
        //如果有参数，把参数转换为url编码形式加入
        url+="?"+tansParam(option.params);
    }
    // 02 可以添加请求头
    var header = option.header||{};
    header.Authorization = "Bearer " +wx.getStorageSync('token');
    // 03 可以添加加载提示
    if(option.loading){
        wx.showToast({
          title: option.loading.title,
          icon:option.loading.icon,
        })
    }
    //返回一个promise
    return new Promise((resolve,reject)=>{
        wx.request({
            //请求的地址如果 http开头直接用url，不是http开头添加baseURL
            url:url,
            method:option.method||"GET", //请求的方法，默认get
            data:option.data,
            header,
            success(res){
                //请求成功
                resolve(res.data)
            },
            fail(err){
                // 04 对错误进行处理
                uni.showToast({title:"加载失败",icon:"none"})
                //请求失败
                reject(err);
            },
            complete(){
                //关闭加载提示
                wx.hideToast()
            }
        })
    })
}
//定义get简易方法
request.get=(url,config)=>{
    return request({url,method:"get",...config}) 
}
// 定义post简易方法
request.post=(url,data,config)=>{
    return request({url,method:"post",data,...config}) 
}
//导入request
module.exports={request}

npm安装Vant Weapp

官方网址https://youzan.github.io/vant-weapp/#/quickstart

• 首先在项目里初始化
• 通过 npm 安装
  npm i @vant/weapp -S --production
• 将 app.json 中的 “style”: “v2” 去除
  
• 修改 project.config.json
  
• 在工具栏构建npm
• 导入组件
  - 使用组件
  

html转微信小程序组件

• 01 wxParse 拷贝文件夹
• 02 content.js
  var WxParse = require(‘…/…/wxParse/wxParse.js’);
  03 content.wxss
  
• 04 content.wxml
  

小程序分包优化

• 小程序一个包最大2M（用户能迅速的开小程序）
• 如果项目比较大，引用很多插件，2M根本不够用分包
  • 1. 底部栏对应的页面
       主包
  • 2. 需要点击后进入页面可以作为子包
  • 3. 子包可以访问主包的内容
       主包不能访问子包的内容
       子包之间也不能访问

分包与预加载

• 分包
  

• 预加载
  

网络

• 1. 小程序请求的地址必须https
• 2. 小程序请求的地址必须和后台约定的

• 如果不没有使用约定的地址(只能测试不能上线)
  

• 手机中测试 右上角三个点击打开调试重启后网络请求