微信小程序

不会敲代码的小王ꦿ

已于 2022-11-10 23:53:38 修改

阅读量805

点赞数 1

文章标签：微信小程序小程序前端

于 2022-11-10 21:30:45 首次发布

本文链接：https://blog.csdn.net/qq_68086484/article/details/127794384

版权

一、微信小程序的基本概念

1、什么是微信小程序

微信里面app
16年推出
竞品：支付宝小程序，钉钉，美团，头条，抖音，qq小程序

2、优点

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

3、开发者

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

4、官方网站

小程序简介 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/

二、项目的创建

1、新建项目

特别注意

2、页面介绍

3、项目的组成

三、小程序的模板语法

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

1、文本渲染

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

2、条件渲染

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

3、列表渲染

wx:for="{{list}}"
wx:key="index"
- {{item}}
- {{index}}

4、自定义列表

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

5、内置组件

text 组件行内组件
view组件块组件
wxsS
- 默认单位是rpx
- 75orpx 等于一个屏幕的宽
- 375就是50%的宽

6、导入

import
- 只能导入template内容
- template/utils.wxml
  - <tempate is="usercart">
    用户名:{namel}
    <template>
- 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">

四、事件及其传参

1、表单绑定

<view class="nav">表单绑定</view>
<input value="{{s1}}" class="inp" bindinput="inputHd"/>
<button type="warn">{{s1}}</button>

2、点击事件

<view class="nav">点击事件</view>
<button type="warn" size="mini" bindtap="tap">鸡汤来了</button>
<button type="warn" size="mini" bindtap="tap" disabled="false">鸡汤来了</button>

3、事件传参

<view class="nav">事件传参</view>
<button
data-msg="鸡汤来了"
 type="primary" bindtap="say" >事件传参A</button>
<button 
data-msg="大哥，喝"
type="warn"  bindtap="say" >事件传参B</button>

event.js

// pages/event/event.js
var app=getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    s1:'小程序很简单',  
  },
  inputHd(e){
    //获取表单的值
    var s1=e.detail.value;
    //更新data的值与视图
    this.setData({s1:s1})
  },
tap(e){
console.log(e);
// wx.showToast({
//   // title: '成功',
//   // icon:'success',
//   // title: '加载',
//   // icon:'loading',
//   title: '发生错误',
//   icon:'error',
//   duration:2000//延迟时间
// })

wx.showLoading({
  title: '加载中',
})
setTimeout(function () {
  wx.hideLoading()
}, 2000)
},
say(e){
console.log(e);
var msg=e.target.dataset.msg
wx.showToast({
  title: '哈哈'+msg,
})
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
this.setData({name:options.name,age:options.age})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({num:app.globalData.num})
  },
  addNum(){
    //更新本地
    this.setData({num:this.data.num+5})
    //更新全局
    app.globalData.num=this.data.num;
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

bindinput 表单输入

bindconfirm 表单输入确认

bindtap 点击时候

五、页面切换及其传参

1、小程序内置跳转

<view>
  <navigator url="/pages/event/event">事件event</navigator>
</view>
<view>
  <navigator open-type="redirect" url="/pages/event/event">跳转并替换</navigator>
</view>
<view>
  <navigator open-type="reLaunch" url="/pages/event/event">重启</navigator>
</view>
<view>
  <navigator open-type="navigateBack" url="/pages/event/event">返回</navigator>
</view>

2、事件绑定跳转

<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>

3、页面传参

<view>
  <navigator open-type="navigate" url="/pages/event/event?name=wang&age=18">事件event</navigator>
</view>
<view>
  <navigator open-type="navigate" url="/pages/event/event?name=王&age=20">跳转并替换</navigator>
</view>

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

4、全局传参

<view style="padding: 30rpx;">
  <button type="primary">全局：{{num}}</button>
</view>



App({
  globalData: {
    userInfo: null,
    num:5,
  }
})

5、tabBar底部导航栏

"tabBar": {
    "color": "#ccc",
    "selectedColor": "#55D1FB",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "./pages/img/t1-h.png",
        "iconPath": "./pages/img/t1.png",
        "pagePath": "pages/nav/nav",
        "text": "首页"
      },
      {
        "selectedIconPath": "./pages/img/t2-h.png",
        "iconPath": "./pages/img/t2.png",
        "pagePath": "pages/jok/jok",
        "text": "笑话"
      },
      {
        "selectedIconPath": "./pages/img/t3-h.png",
        "iconPath": "./pages/img/t3.png",
        "pagePath": "pages/home/home",
        "text": "home"
      },
      {
        "selectedIconPath": "./pages/img/t4-h.png",
        "iconPath": "./pages/img/t4.png",
        "pagePath": "pages/yidian/yidian",
        "text": "一点"
      }
    ]
  },

视图

六、封装request

为什么封装request

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

//基础的url
const URL={
  baseURL:"http://dida100.com"
}
function tansParams(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
  if(option.params){
    //如果有参数，把参数转换为url编码形式传入
    url+="?"+tansParams(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,//post出入的参数
      header,
      success(res){
        //请求成功
        resolve(res.data);
      },
      fail(err){
        //04 对错误进行处理
        wx.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}

七、小程序插件的使用

1、初始化项目

2、安装插件

3、app.json 删除v2

4、修改project.config.js

5、工具构建npm

6、导入组件

7、使用组件

八、内置api

//导入request
const {request}=require("../utils/request")
//定义api
//获取频道与分类
function GetCategory(){
  return request.get("/mi/cats.php")
}
//获取分类列表
function GetNewsList(data){
  return request.get("/mi/list.php",{params:data})
}
//获取新闻内容
function GetNewsContent(data){
  return request.get("/mi/content.php",{params:data,
  loading:{
    title:"n内容准备中...",
    icon:"loading"
  }})
}
module.exports={
  GetCategory,GetNewsList,GetNewsContent
}