微信小程序的使用

言兮的酒

已于 2022-04-16 15:55:55 修改

阅读量984

点赞数

文章标签：前端

于 2022-04-16 12:00:00 首次发布

本文链接：https://blog.csdn.net/m0_67227657/article/details/124205765

版权

01 注册小程序
https://mp.weixin.qq.com/wxopen/waregister?action=step1

02 下载并安装小程序开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

03开发文档
https://developers.weixin.qq.com/miniprogram/dev/framework/

特点：

点击小程序

填写信息

完成注册

点击开发管理

复制id到小程序

点击开发工具

下载64位

扫描进入开发环境：

开发环境创建成功，下面就可以创建项目了~

点击安装

创建项目

项目结构

创建一个页面

小程序内置组件

1、<view>view组件</view>

2、<text>文本</text>
<text user.select="true">用户长按可选择</text>

3、<image> 图片组件

src 图片地址

mode模式
scaleToFill 不保持宽高比，缩放
aspectFit 保持宽高比缩放，长边优先（整个图片都显示）
widthFix 宽不变，高自动
heightFix 高不变，宽自动
left right top bottom center 显示局部

4、<input>

value 值

placeholder 提示文本

password=true 密码框

type 弹出不同的键盘
text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘
safe-password 密码安全输入键盘
nickname 昵称输入键盘2.21.2

confirm-type 键盘右下角案例
send 右下角按钮为“发送”
search 右下角按钮为“搜索”
next 右下角按钮为“下一个”
go 右下角按钮为“前往”
done 右下角按钮为“完成”

5、<button>按钮
type颜色类型
primary 绿色
default 白色
warn 红色

size=“mini” 行内小按钮

6、 <switch>切换
color 颜色
type="checkbox" 选择框

7、<picker> 选择
header-text 标题文本
mode
times 时间
date 日期
region 省市区

8、<icon>图标
type
success成功
info信息
success_no_circle
warn
waiting
cancel
download
search
clear

9、<scroll-view>滚动区域
scroll-x 水平
scroll-y 垂直

10、<swiper>
        <swiper-item>幻灯片
        indicator-dots="true" 是否显示提示点
        autoplay=“true” 自动播放
        circular=“true” 衔接滑动

组件案例：

<view class="title">容器组件swiper</view>
<swiper indicator-dots="true" class="swiper" autoplay="true" circular="true">
<swiper-item>
<view style="background-color: lightyellow;">A</view>
</swiper-item>
<swiper-item>
<view style="background-color: orange;">B</view>
</swiper-item>
<swiper-item>
<view style="background-color: lightblue;">C</view>
</swiper-item>
</swiper>
<view class="title">容器组件</view>
<scroll-view class="scrollView" scroll-y="true">
<view class="item">itemA</view>
<view class="item" style="background-color: green;">itemb</view>
<view class="item" style="background-color: yellow;">itemc</view>
</scroll-view>
<view>水平</view>
<scroll-view class="scrollView s2" scroll-x="true">
<view class="w">
<view class="item" style="background-color: bisque;">itemA</view>
<view class="item" style="background-color: green;">itemb</view>
<view class="item" style="background-color: yellow;">itemc</view>
</view>
  
</scroll-view>
<view class="title">switch-picker-icon</view>
<view class="content">
<icon type="success"></icon> <icon type="info" size="100"></icon>
<picker mode="date" header-text="标题">选择</picker>
<switch></switch>
<switch checked="true"></switch>
<switch checked="true" color="#f70"></switch>
<switch checked="true" type="checkbox"></switch>
</view>
<view class="title">表单组件input button</view>
<view class="content">
<input placeholder="请输入" class="inp" password="true"/>
<button type="primary" style="width:100%">确定</button>
<button type="warn" size="mini">警告</button>
<button type="default" size="mini">默认</button>
</view>
<view class="title">图片组件image</view>
<image src="/images/pic1.jpg" class="img1" mode="aspectFill"></image>
<view class="title">文本标签</view>
<view class="content">
<view>块状区域</view>
<view>块状区域</view>
<text>文本组件</text>
<text user-select="text">文本组件</text>
</view>

运行结果：

页面.json

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

tabBar 底部栏的配置

"tabBar": {
    "color": "#484848",  //文字默认颜色
    "selectedColor": "#16a5e7",  //文字选中颜色
    "list": [{  //页面列表
      "pagePath":"pages/base/base", //页面地址
      "text": "语法",   //文本
      "iconPath": "/images/home.png",  //图标地址
      "selectedIconPath": "/images/home-h.png"  //选中图标地址
    }

模板语法

条件渲染

wx:if="{条件}"

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

文本渲染

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

列表渲染

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

自定义列表

多重for循环定义名称

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

//home.js部分
   * 页面的初始数据
   */
  data: {
      isLog:true,
      score:50,
      msg:"你好，小程序",
      list:["小程序","vue","react"]
  },


//home.wxml部分
<view class="title">引用include</view>
<view class="content">
<include src="/template/foot"></include>
<!-- 相当于把文件复制一份 不会导入template -->
<include src="/template/foot"></include>
</view>
<view class="title">模板template</view>
<import src="/template/user"></import>
<!-- 指导入template -->
<view class="content">
<template is="user" data="{{name:'mumu',age:18}}"></template>
<template is="user" data="{{name:'mumu1',age:188}}"></template>
<template is="copy"></template>
</view>

<view class="title">自定义列表渲染</view>
<view class="content">
<view 
wx:for-item="myitem"
wx:for-index="myindex"
wx:for="{{list}}" wx:key="myindex">
{{myindex+1}}-{{myitem}}
 </view>
</view>
<view class="title">列表渲染</view>
<view class="content">
<view wx:for="{{list}}" wx:key="index">
{{index+1}}-{{item}}
 </view>
</view>
<view class="title">文本渲染{ { } }</view>
<view class="content">
<view>{{2+5}}</view>
<view>{{msg}}</view>
<view>{{msg.length}}</view>
<view>属性也要带 { { } }</view>
<input type="text" placeholder="{{msg}}"/>
</view>
<view class="title">条件渲染</view>
<view class="content">
<view wx:if="{{isLog}}">欢迎回来主人</view>
<view wx:else>请登录</view>
<view wx:if="{{score>=90}}">徒弟，辟邪剑谱送给你！</view>
<view wx:elif="{{score>=80}}">独孤九剑你可以练习了</view>
<view wx:elif="{{score>=70}}">小师妹托付你了</view>
<view wx:else="">没通关，去思过崖面壁去吧</view>
</view>

运行结果：

事件

自定义方法
showMsg(){}

调用方法
<button bindTap="showMsg">

事件自定义参数

定义参数
<button bindTap="showMsg" data-msg="我爱我的祖国">
在方法里面获取参数
showMsg(e){
let msg = e.currentTarget.dataset.msg
wx.showToast({
title:msg,
icon:"error"
})
}

表单的双向绑定

 <input value = "{{msg}}" bindinput="changeHd">
                定义方法更新视图与data
                 function changeHd(e){
                        //获取表单的值
                        let msg = e.detail.value;
                        //更新视图和data
                        this.setData({msg})
                }

事件

bindtap 点击

bindcomfirm 确认

bindchange 表单值发生改变

bindinput 表单输入

 * 页面的初始数据
   */
  data: {
msg:"上海加油"
  },
  changeHd(e){
    let msg =e.detail.value;
    this.setData({msg})
  },
  showMsg(e){
    console.log(e,"event");
    // 获取事件的参数
    let msg = e.currentTarget.dataset.msg||"开心开心开心";
    // 弹出提示吐司，不要icon:"none"
    wx.showToast({
      title:msg,
      icon:"error"
    })
  },

<view class="title">表单</view>
<view class="content">
<input type="text" 
value="{{msg}}"
bindinput="changeHd"
style="border:1rpx solid #ccc"/>
<!-- bindinput绑定输入事件 bindchange绑定改变事件 bindtap点击事件 -->
<view>{{msg}}</view>
</view>

<view class="title">事件传参</view>
<view class="content">
<button type="primary" 
size="mini" 
data-msg="小程序好学"
bindtap="showMsg">小程序</button>
<button type="warn" size="mini" bindtap="showMsg">Vue</button>
</view>

<view class="title">普通事件</view>
<view class="content">
<button type="primary" size="mini" bindtap="showMsg">事件</button>
</view>

微信api wx:xxx

wx.stopPullDownRefresh() 停止下来刷新
wx.showToast 吐司提示
wx.request(url.method,success(){}) 网络请求
默认请求地址需要在后端配置
默认请求地址要求https

key
<view wx:for="{{list}}" wx:key="docid" class="item">
{{item.summary}}
</view>
key值自动解构

配置文件
"navigationBarTitleText": "爱笑话",
标题颜色
"enablePullDownRefresh": true,
允许下拉刷新
"backgroundColor": "#f30",
背景文字颜色
"backgroundTextStyle": "dark",
背景颜色
"usingComponents": {}
使用组件

page参数

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

data与更新

js里面方法data数据
this.data.msg
在wxml使用
{{msg}}

更新data视图
this.setData({key:value,key2:value2})
注意this指向，在wx.xxxapi里面this的wx这个对象不是当前页面

代码案例

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

/**
   * 页面的初始数据
   */
  data: {
    page: 1,//第几页笑话
    list: [],//存放笑话的数组
  },
  //定义获取笑话的方法
  getJoks(type=1) {
    // 用that缓存this
    var that = this;
    wx.request({
      url: 'http://dida100.com/mi/list.php?page=' + that.data.page,
      success(res) {
        //停止下来刷新
        wx.stopPullDownRefresh();
        console.log(res, "笑话");
        if(type===1){
          // wx:showToast({
             wx.showToast({
            title:`已经加载${res.data.result.length}条笑话`,
            icon:"none"
          })
           // 更新笑话 新获取的数据res.data.result与原来是数据that.list合并
        that.setData({ 
          list: res.data.result.concat(that.data.list) ,
          page:that.data.page+1
        })
        }else{
          that.setData({
            list:that.data.list.concat(res.data.result),
            page:that.data.page+1
          })
        }    
       
      }
    })
  },
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getJoks();//调用getJoks方法
  },
/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
this.getJoks();
  },

运行结果：

言兮的酒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
微信小程序的使用

01 注册小程序https://mp.weixin.qq.com/wxopen/waregister?action=step102 下载并安装小程序开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html03开发文档https://developers.weixin.qq.com/miniprogram/dev/framework/特点：点击小程序注册填写信息...
复制链接

扫一扫