devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序详细教程_微信小程序csdn

作者：小丑西瓜9 | 2024-03-23 06:10:33

赞

踩

微信小程序csdn

目录

一，这次分享如何使用微信小程序，制作出自己想要的页面，首先介绍常用的内置组件：

1，在页面的模板xxx.wxml里写入内容，首先是文本标签，介绍两个最常用的

2，按钮

3，文本标签

4，图片标签

 5，开关选择器

6，日期选择器

 7，图标

8，元素水平滚动

9，垂直滚动，只是把scroll-view的scroll-x变成scroll-y=true即可

 10，幻灯片组件

二，基础语法介绍

1，文本渲染 {{}}

 2，条件渲染wx:if  wx:else

 3,多重条件渲染wx:if   wx:elif    wx:else

 4,列表渲染 wx:for

 5,自定义列表项名字，渲染 wx:for-item   wx:for-index

6，使用模板template  需要新建文件并导入

7，引用include

 三，事件

1，普通事件 

2，事件传参

3，文本框双向绑定

 四，对数据进行操作，增删为例

五，创建路由，也就是把我们刚才几个示例的页面连起来，可以相互跳转

一，这次分享如何使用微信小程序，制作出自己想要的页面，首先介绍常用的内置组件：

首先下载微信开发者工具，官网：稳定版 Stable Build | 微信开放文档 (qq.com)

安装后创建小程序，分析一下里面的各个文件的作用

1，在页面的模板xxx.wxml里写入内容，首先是文本标签，介绍两个最常用的

  1.  <view>巴拉巴拉巴拉</view>
  2.   <text>前端前端棒，</text>
  3.   <text>前端前端好</text>

 页面效果如下

从中我们可以发现<view></view>标签段标签，相当于HTML中的div，而<text></text>相当于sapn

2，按钮

  1.   <button type="primary">确定</button>
  2.   <button type="warn" size="mini">警告</button>
  3.   <button type="default" size="mini">默认</button>

 这是按钮标签，type的值一共有三个，size=mini是小按钮的意思，看一下页面效果

3，文本标签

<input placeholder="请输入内容" class="inp1" password="true"/>

 值得注意的是微信小程序里的文本标签没有样式，连边框都没有，需要的话自己设置样式

4，图片标签

<image src="../../images/pic1.jpg" mode="aspectFit"></image>

 这是图片标签，mode是图片裁剪缩放的模式，值有很多，建议查阅官方文档

 5，开关选择器

  1. <switch></switch>
  2. <switch checked="true" color="#f70"></switch>
  3. <switch checked="true"></switch>
  4. <switch checked="true" type="checkbox"></switch>

这是开关选择器，checked=true显示为开状态，type=checkbox会变成一个复选框

6，日期选择器

<picker mode="date" header-text="标题" style="width: 300rpx;height: 100rpx;border: 1rpx solid #666;text-align: center;line-height: 100rpx;">点我选择日期</picker>

 一个选择器，有很多种类型，这里mode=date意思是日期选择器

页面显示

 点击后显示

 7，图标

  1. <icon type="success"></icon>
  2. <icon type="info" size="50"></icon>
  3. <icon type="warn" size="80"></icon>
  4. <icon type="waiting" size="100"></icon>

图标，type指定图标类型，不指定默认为success类型，size指定图标大小

8，元素水平滚动

  1. <view>水平滚动</view>
  2. <scroll-view class="scrollView" scroll-x="true">
  3. <view class="warp">
  4.   <view class="item">itemA</view>
  5.   <view class="item" style="background-color: yellow;">itemB</view>
  6.   <view class="item" style="background-color: aqua;">itemC</view>
  7. </view>
  8. </scroll-view>

 视图容器，scroll-view标签的scroll-x=true此时此标签里的元素可以水平翻动

拖动鼠标向左向右是可以拖动的

9，垂直滚动，只是把scroll-view的scroll-x变成scroll-y=true即可

 

 10，幻灯片组件

  1. <view>swiper组件</view>
  2. <swiper class="swiper" indicator-dots="true" autoplay="true" circular="true">
  3. <swiper-item>
  4. <view style="background-color: skyblue;">A</view>
  5. </swiper-item>
  6. <swiper-item>
  7. <view style="background-color: aqua;">B</view>
  8. </swiper-item>
  9. <swiper-item>
  10. <view style="background-color: red;">C</view>
  11. </swiper-item>
  12. </swiper>

幻灯片组件，

二，基础语法介绍

1，文本渲染 {{}}

 2，条件渲染wx:if  wx:else

 3,多重条件渲染wx:if   wx:elif    wx:else

  1. <view class="title">多重条件渲染</view>
  2. <view wx:if="{{score>=90}}">哇，你太优秀了</view>
  3. <view wx:elif="{{score>=80}}">真厉害啊你</view>
  4. <view wx:elif="{{score>=70}}">还可以，继续努力</view>
  5. <view wx:else>不行，留级去</view>

 4,列表渲染 wx:for

 

 5,自定义列表项名字，渲染 wx:for-item   wx:for-index

页面效果与上面一样

6，使用模板template  需要新建文件并导入

7，引用include

 三，事件

1，普通事件 

点击后会弹出

2，事件传参

 

 

 点击不同的按钮，会弹出不同的内容

3，文本框双向绑定

 

 四，对数据进行操作，增删为例

xxx.wxml代码

  1. <view class="title">增删改查</view>
  2. <view class="content">
  3. <input type="text" 
  4.   placeholder="请输入计划" 
  5.   class="inp" 
  6.   value="{{temp}}"
  7.   bindinput="inputHd" 
  8.   bindconfirm="confirmHd"/>
  9. </view>
  10. <view wx:for="{{list}}" wx:key="index" class="item">
  11. <switch type="checkbox" checked="{{item.done}}"></switch>
  12. <view class="con">{{item.title}}</view>
  13. <view class="del" bindtap="delitem" data-item='{{item}}'>×</view>
  14. </view>

 xxx.js

  1. // pages/todo/todo.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8. list:[
  9.   {done:true,title:"学习vue"},
  10.   {done:true,title:"学习react"},
  11.   {done:false,title:"学习小程序"},
  12. ]
  13.   },
  14.   //实现文本框双向绑定
  15.   inputHd(e){
  16.     // 用户输入实现双向绑定
  17.     this.setData({temp:e.detail.value})
  18.   },
  19.   // 用户按回车，手机的确认按钮出发
  20.   confirmHd(e){
  21.     // 获取列表
  22.     let list=this.data.list;
  23.     //把新的数据插入到列表
  24.     list.unshift({done:false,title:this.data.temp});
  25.     // 更新列表和temp
  26.     this.setData({list,temp:''})
  27.   },
  28.   //删除方法
  29.   delitem(e){
  30.   let that=this;
  31.   wx.showModal({
  32.     title: '提示',
  33.     content: '您确定要删除吗？',
  34.     success (res) {
  35.       if (res.confirm) {
  36.         let item=e.currentTarget.dataset.item;
  37.         let list=that.data.list;
  38.         let ind =list.findIndex(value=>value.title===item.title);
  39.         list.splice(ind,1);
  40.         that.setData({list})
  41.       } else if (res.cancel) {
  42.         console.log('用户点击取消')
  43.       }
  44.     }
  45.   })
  46.  
  47. },
  48.   /**
  49.    * 生命周期函数--监听页面加载
  50.    */
  51.   onLoad: function (options) {
  52.  
  53.   },
  54.  
  55.   /**
  56.    * 生命周期函数--监听页面初次渲染完成
  57.    */
  58.   onReady: function () {
  59.  
  60.   },
  61.  
  62.   /**
  63.    * 生命周期函数--监听页面显示
  64.    */
  65.   onShow: function () {
  66.  
  67.   },
  68.  
  69.   /**
  70.    * 生命周期函数--监听页面隐藏
  71.    */
  72.   onHide: function () {
  73.  
  74.   },
  75.  
  76.   /**
  77.    * 生命周期函数--监听页面卸载
  78.    */
  79.   onUnload: function () {
  80.  
  81.   },
  82.  
  83.   /**
  84.    * 页面相关事件处理函数--监听用户下拉动作
  85.    */
  86.   onPullDownRefresh: function () {
  87.  
  88.   },
  89.  
  90.   /**
  91.    * 页面上拉触底事件的处理函数
  92.    */
  93.   onReachBottom: function () {
  94.  
  95.   },
  96.  
  97.   /**
  98.    * 用户点击右上角分享
  99.    */
  100.   onShareAppMessage: function () {
  101.  
  102.   }
  103. })

 页面效果如下

五，创建路由，也就是把我们刚才几个示例的页面连起来，可以相互跳转

 代码：

  1. {
  2.   "pages": [
  3.     "pages/todo/todo",
  4.     "pages/run/run",
  5.     "pages/jok/jok",
  6.     "pages/event/event",
  7.     "pages/base/base",
  8.     "pages/home/home",
  9.     "pages/index/index",
  10.     "pages/logs/logs"
  11.   ],
  12.   "window": {
  13.     "backgroundTextStyle": "light",
  14.     "navigationBarBackgroundColor": "#54ea7c",
  15.     "navigationBarTitleText": "前端嗷嗷叫",
  16.     "navigationBarTextStyle": "black"
  17.   },
  18.   "tabBar": {
  19.     "color": "#484848",
  20.     "selectedColor": "#16a5e7",
  21.     "list": [
  22.       {
  23.         "pagePath": "pages/run/run",
  24.         "text": "抓包",
  25.         "iconPath": "/images/home.png",
  26.         "selectedIconPath": "/images/home-h.png"
  27.       },
  28.       {
  29.         "pagePath": "pages/todo/todo",
  30.         "text": "计划",
  31.         "iconPath": "/images/home.png",
  32.         "selectedIconPath": "/images/home-h.png"
  33.       },
  34.       {
  35.         "pagePath": "pages/event/event",
  36.         "text": "事件",
  37.         "iconPath": "/images/home.png",
  38.         "selectedIconPath": "/images/home-h.png"
  39.       },
  40.       {
  41.         "pagePath": "pages/base/base",
  42.         "text": "语法",
  43.         "iconPath": "/images/home.png",
  44.         "selectedIconPath": "/images/home-h.png"
  45.       },
  46.       {
  47.         "pagePath": "pages/home/home",
  48.         "text": "组件",
  49.         "iconPath": "/images/study.png",
  50.         "selectedIconPath": "/images/study-h.png"
  51.       }
  52.     ]
  53.   },
  54.   "style": "v2",
  55.   "sitemapLocation": "sitemap.json"
  56. }

 页面效果

 以上就是微信小程序常用的内置组件，基础语法，事件，请求的笑话数据和抓包由于涉及的比较多，再加上爬取人家数据不太好在这里就不赘述了，实在想了解的小伙伴私聊哦！

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号