小程序基础学习篇

最新推荐文章于 2024-05-30 15:19:15 发布
最新推荐文章于 2024-05-30 15:19:15 发布
阅读量948 收藏
点赞数
分类专栏： 小程序 wx 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyx9611/article/details/108991192
版权

小程序基础学习篇------2020-10-15

生命周期

在这里插入图片描述

应用生命周期

在这里插入图片描述

//app.js
App({
	/* 
		应用第一次启动就会触发的事件
	 */
	
	onLaunch: function() {
		// 应用第一次启动的时候，获取用户的个人信息
		
		/* js方式跳转，在这里写的，onPageNotFound不会被触发 */
		/* wx.navigateTo({
			url:'11/222/23'
		}) */
		
		// 展示本地存储能力
		var logs = wx.getStorageSync('logs') || []
		logs.unshift(Date.now())
		wx.setStorageSync('logs', logs)
	
		// 登录
		wx.login({
			success: res => {
				console.log(res)
				// 发送 res.code 到后台换取 openId, sessionKey, unionId
			}
		})
		// 获取用户信息
		wx.getSetting({//获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
			success: res => {
				console.log(res)
				if (res.authSetting['scope.userInfo']) {//判断是否授权
					// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
					wx.getUserInfo({
						success: res => {
							console.log(res)
							// 可以将 res 发送给后台解码出 unionId
							this.globalData.userInfo = res.userInfo
	
							// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
							// 所以此处加入 callback 以防止这种情况
							if (this.userInfoReadyCallback) {
								this.userInfoReadyCallback(res)
							}
						}
					})
				}
			}
		})
	},
	/* 
	 应用被用户看到的时候触发
	 */
	onShow:function(){
		//页面数据和页面效果重置
	},
	
	/* 
	应用被隐藏的时候触发 
	 */
	onHide:function(){
		//暂停或清楚定时器
	},
	/* 
	 应用发生错误的时候触发，入参是错误信息
	 */
	onError:function(err){
		//应用发生代码报错的时候，收集错误信息，通过一部请求，将信息发送到后台去
		console.log(err)
	},
	/* 
	 页面找不到的时候会触发
	 应用第一次启动的时候，如果找不到入口文件就会触发
	 */
	onPageNotFound:function(){
		// 如果页面不存在，同通过js的方式重新跳转页面，重新跳到第二个首页
		// 不能跳转到tabbar页面，与导航组件类似
	},
	/* 
	 未处理的 Promise 拒绝事件监听函数
	 */
	onUnhandledRejection:function(){},
	/* 
	监听系统主题变化
	 */
	onThemeChange:function(){},
	
	
	
	globalData: {
		userInfo: null
	} 
})
页面生命周期

在这里插入图片描述

Page({

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

  },

  /**
   * 生命周期函数--监听页面加载。// 页面创建时执行
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示//页面出现在前台时执行
   */
  onShow: function () {

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

  /**
   * 生命周期函数--监听页面隐藏// 页面从前台变为后台时执行
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
	* 也可以通过点击超链接来演示：
	* 	navigator的open-type值为“redirect\relauch\navigateBack”、即关闭页面
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作；页面数据或者页面效果重新渲染
   */
  onPullDownRefresh: function () {

  },

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

  },

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

  },
  
  /* 
	页面滚动就会触发
  */
 onPageScroll:function(){}
 /* 
 页面的尺寸发生改变时触发
 小程序发生横屏和竖屏的切换时会触发
 */
 onResize:function(){}
 /* 
	必须要求当前页面也是tabbar页面
	点击的自己的tabbar后才会触发
 */
 onTabItemTap:function(){}
})
组件的使用

新建component
组件官网地址

父组件向子组件传递

父组件（页面）向子组件发送数据， 通过标签属性的方式来传递
· 在子组件上进行接收
· 把这个数据当成data中的数据直接使用即可

父组件
<!--父组件的wxml-->
<Tabs tabs="{{tabs}}"></Tabs>

// 父组件的json
{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

//父组件的js，放数据的
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		tabs: [{//将把该数据传到子组件
				id: 0,
				name: "首页",
				isActive: true
			},
			{
				id: 1,
				name: "原创",
				isActive: false
			},
			{
				id: 2,
				name: "新闻",
				isActive: false
			},
			{
				id: 3,
				name: "关于",
				isActive: false
			}
		]
	},
})
子组件[component]

1 绑定点击事件 需要在methods中绑定
2 获取点击的索引
3 获取原数组

//循环数组 [].forEach 遍历数组 修改了item【数据项】，原数组也会被修改

  • 组件的方法列表：

    • 页面.js文件中，存放事件回调函数的时候，存放在data同层级下！！！！
    • 组件.js文件中，存放事件的回调函数的时候，必须放在methods中！！！

//获取data中的原数组
//· 解构 对 复杂类型进行结构的时候，复制一份变量的引用而已
//· 最严谨的做法 重新拷贝一份数组，再对数组的备份进行处理。不要直接 this.data.数据
//· 可以这样拷贝一份：let tabs = JSON.parse(JSON.stringify(this.data.tabs));
let {tabs} = this.data;//等价于 let tabs = this.data.tabs;

//子组件的js
Component({
	/**
	 * 组件的属性列表：从父组件传递过来，接收的数据
	 */
	properties: {
		// 要接收的数据名称
		aaa:{
			type:String,//type 要接收的数据类型
			value:""//value 默认值
		},
		tabs:{
			type:Array,
			value:[]
		}
	},

	/**
	 * 组件的初始数据
	 */
	data: {
		
	},
	methods: {
		handleTap:function(e){
			console.log(e)
			// 获取索引
			const {index}  = e.currentTarget.dataset;
			//获取data中的原数组
			
			let {tabs} = this.data;//等价于  let tabs = this.data.tabs;
			/*4 对数组循环
				· 给每一个循环项选中属性改为false
				· 给当前索引的项，将选中属性改为true
			*/
			tabs.forEach((item,i)=>i===index?item.isActive=true:item.isActive=false);
			this.setData({
				tabs
			})
		},
	}
})


//子组件的json
{
  "component": true,
  "usingComponents": {}
}
子组件向父组件传递
子组件

子向父传递数据 通过事件的方式传递
· 在子组件的标签中加入一个自定义事件

1 绑定点击事件 需要在methods中绑定
2 获取点击的索引
3 获取原数组
4 点击事件触发的时候
触发父组件中的自定义事件 同时传递数据给父组件

this.triggerEvent("父组件中自定义事件的名称",要传递的参数)

<!--子组件的wxml-->
<view class="tabs">
	<view class="tabs-title">
		<view 
		class="tabs-title-item {{item.isActive?'active':''}}" 
		wx:for="{{tabs}}" wx:key="id"
		bindtap="handleTap" data-index="{{index}}">
			{{item.name}}
		</view>
	</view>
	<view class="tabs-content">
		<!-- 
		 slot 占位符 插槽
			等到 父组件调用 子组件的时候，再传递这些标签
		 -->
		<slot></slot>
	</view>
</view>

// https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
//子组件的js
Component({
	methods: {
		handleTap:function(e){
	
			// 获取索引
			const {index}  = e.currentTarget.dataset;
			//触发父组件中的自定义事件 同时传递数据给父组件
			this.triggerEvent("itemChange",{index})
			
		},
	}
})
父组件
<!--父组件的wxml-->
<!--Tabsctf是定义的子组件--> 
<Tabsctf tabs="{{tabs}}" binditemChange="handlerItemChange">
	<block wx:if="{{tabs[0].isActive}}">0</block>
	<block wx:elif="{{tabs[1].isActive}}">1</block>
	<block wx:elif="{{tabs[2].isActive}}">2</block>
	<block wx:else>3</block>
</Tabsctf>

//父组件的js
Page({
	// 自定义事件用来接收从子传过来的参数
	handlerItemChange: function(e) {
		const {index} = e.detail;
		
		let {tabs} = this.data;//等价于  let tabs = this.data.tabs;
		//循环数组  [].forEach 遍历数组  修改了item【数据项】，原数组也会被修改
		tabs.forEach((item,i)=>i===index?item.isActive=true:item.isActive=false);
		
		this.setData({
			tabs
		})
	}

})

slot 占位符 插槽

		等到 父组件调用 子组件的时候，再传递这些标签

小程序基础学习篇------2020-10-14

条件渲染

js：if else, if else if else

1、 小程序
wx:if="{{true/false}}"

wx:if
wx:if

wx:if
wx:elif
wx:else
2、hidden 在标签上直接加上属性 hidden="{{true}}"

3、使用场景如下：
当标签不是频繁切换显示的时候，优先使用wx:if
直接把标签从页面结构直接移除，性能消耗大
当标签频繁的切换的时候，优先使用hidden
通过添加样式的方式来切换显示
hidden属性 不要 和样式 display 一起使用

<view>
	  <view>条件渲染</view>
	  <view wx:if="{{true}}">1</view>
	  <view wx:if="{{false}}">2</view>
	  <view>------------------</view>
	  <view wx:if="{{false}}">1</view>
	  <view wx:elif="{{false}}">2</view>
	  <view wx:else>3</view>
	  <view>------------------</view>
	  <view hidden>hidden-1</view>
	  <view hidden="{{false}}">hidden-2</view>
  </view>
常用组件

view 、 text 、 rich-text、 button、 image 、 navigator、 icon、 swiper、 radio、 checkbox 等

组件名称组件地址
viewhttps://developers.weixin.qq.com/miniprogram/dev/component/view.html
texthttps://developers.weixin.qq.com/miniprogram/dev/component/text.html
imagehttps://developers.weixin.qq.com/miniprogram/dev/component/image.html
swiperhttps://developers.weixin.qq.com/miniprogram/dev/component/swiper.html ;https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html
navigatorhttps://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
rich-texthttps://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
buttonhttps://developers.weixin.qq.com/miniprogram/dev/component/button.html
iconhttps://developers.weixin.qq.com/miniprogram/dev/component/icon.html
radiohttps://developers.weixin.qq.com/miniprogram/dev/component/radio.html ;https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html
checkboxhttps://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html ;https://developers.weixin.qq.com/miniprogram/dev/component/checkbox-group.html
inputhttps://developers.weixin.qq.com/miniprogram/dev/component/input.html
input

1 需要给input标签绑定 input事件
绑定关键词 bindinput
2 如何获取输入框的值
通过事件源对象获取
e.detail.value
3 把输入框的值 赋值到 data 中
不能直接写下面的两种：
this.data.num=e.detail.value
this.num = e.detail.value
应该使用如下：
this.setData({
num:e.detail.value
})

4 需要加入一个点击事件
· bindtap
· 无法在小程序中给事件 直接传参
· 通过自定义属性的方式传递参数》data-opration="{{1}}"
· 在事件源中获取属性

 <input type="text" bindinput="handleInput"/>
  <view>{{num}}</view>
  <button bindtap="handleTap" data-opration="{{1}}">+</button>
  <button bindtap="handleTap" data-opration="{{-1}}">-</button>

Page({
  data: {
    num: 0
  },
  // 输入框的input事件的执行逻辑
  handleInput(e) {
    console.log(e)
    console.log(e.detail.value)
    this.setData({
      num: e.detail.value
    })
  },
  // 绑定事件
  handleTap: function (e) {
    console.log(e)
    //获取自定义属性operation
    const operation = e.currentTarget.dataset.opration;
    this.setData({
      num: this.data.num + operation
    })
  }
})
view
 <view hover-class="ho-class">点我试试</view>
 <view>
      <view hover-stop-propagation="true">点我试一试</view>
 </view>
text
 //长按文字复制 - selectable
  //文本解码- decode
  //user-select 文本是否可选
<text selectable decode user-select="true">
	  text&nbsp;122
  </text>
image
 //image
  //图片标签  image默认宽320px 高240px
  //支持懒加载 lazy-load 自己判断当图片出现在视口  上下三屏的高度的时候，会加载图片
  
  //建议使用线上的图片
   //打包上线不能超过2M
   
   <image src="https://**" mode="aspectFit" lazy-load="true"></image>
swiper

轮播图外层容器swiper
每一个轮播项 swiper-item
swiper标签 存在默认样式
width 100%
height 150px
swiper的高度无法实现由内容撑开
先找出原图片的宽度和高度 等比例的条件下给swiper设置高度

原图：534 *300px

swiper高度 /swiper宽度    = 图片高度 / 图片宽度 

h / 100vw = 300/534
h=100vw * 300 / 534

autoplay 为true时自动轮播，默认5s
interval 设置轮播时间
circular 循环轮播，衔接轮播
indicator-dots 显示指示器 分页器 索引器

//wxml
 <swiper autoplay="true" interval="2000" circular="true" indicator-dots="true" indicator-active-color="green" indicator-color="#f0f">
    <swiper-item>
        <image 
  mode="widthFix"        src="https://dev.sgcctd.cn/oss/filemag/getFileById?fileId=5f6413f5e7d4bb00083b34d2"></image>
    </swiper-item>
    <swiper-item>
        <image 
  mode="widthFix"        src="https://dev.sgcctd.cn/oss/filemag/getFileById?fileId=5f6413f5e7d4bb00083b34d2"></image>
    </swiper-item>
    <swiper-item>
        <image 
  mode="widthFix"        src="https://dev.sgcctd.cn/oss/filemag/getFileById?fileId=5f6413f5e7d4bb00083b34d2"></image>
    </swiper-item>
 </swiper>


 //wxss
 swiper{
  height: calc(100vw * 300 /534)
}
image{
  width: 100%
}
navigator

块级元素 默认会换行 可设置宽高
url 跳转的路径（绝对或相对）
1、target 要跳转到当前小程序还是其他的小程序页面
· self 默认值 自己
· miniProgram 其他小程序
2、open-type 跳转方式
· navigate 默认值 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 ，保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
· redirect 对应 wx.redirectTo 的功能 ,关闭当前页面，跳转到应用的某个页面，但是不允许跳转到tabber页面
· switchTab 对应 wx.switchTab 的功能 ，跳转到tabbar页面，并关闭其他所有非tabbar页面
· reLaunch 对应 wx.reLaunch 的功能 1.1.0，关闭所有页面，打开到应用内的某个页面
· navigateBack 对应 wx.navigateBack 的功能 1.1.0，关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages()获取当前的页面栈
· exit 退出小程序，target="miniProgram"时生效 2.1.0，退出小程序，target="miniProgram"时生效

<navigator url="/pages/demoSwiper/demoSwiper" target="self">轮播</navigator>
<navigator open-type="redirect" url="/pages/demoSwiper/demoSwiper" target="self">redirect 不允许跳到tabbar</navigator>
<navigator url="/pages/demoSwiper/demoSwiper" target="self">switchTab允许跳到tabbar</navigator>
rich-text

1、nodes 属性来实现
·接收标签字符串:常用
· 接收对象数组
2、space
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小

//wxml
<rich-text nodes="{{urlStr}}"></rich-text> 
 <rich-text nodes="{{html}}"></rich-text>
 

//js
 Page({

  /**
   * 页面的初始数据
   */
  data: {
    html:[{
      // div标签 name属性来指定
      name:"div",
      // 标签上有哪些属性
      attrs:{
        // 标签上的属性  class style
        class:"my-div",
        style:"color:red;"
      },
      //子节点 children 要接收的数据类型 和 nodes 第二种渲染方式的数据类型一致
      children:[{
        name:"p",
        attrs:{},
        //放文本
        children:[{
          type:"text",
          text:"hello"
        }]
      }]
    }],
    urlStr:'<div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://www.tmall.com/wow/z/heybox/heyboxrax/heybox?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.1&amp;scm=1007.home_icon.tmallxp.d&amp;wh_biz=tm&amp;disableNav=YES"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">天猫新品</p></a><a class="sc-EHOje hrPgER" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.6&amp;scm=1007.home_icon.chongzzx.d&amp;_wml_code=Vfw8V4IdfflvFcsPv2fKDCLgFlhCoOQ406ZO9WKS70zNVh2FhuClrYZQHV%2BUj8rweMrPJgOrvqON3zeUHJMIALqc03AQZnf3hmtKmJM2g5PuR9UuzwivVDM%2Bil4nBDGBPXlfSqZZA3CdATGQpVOeZMO8SbyJvaZdoC89%2B2Gg8FZsD4wqDUKs7VcgTjZxbgdE&amp;subSource=stcz_1"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1llI3f4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">充值中心</p></a></div>'
  },
  })
button

button
1 size 按钮大小
default
mini
2 type 按钮的颜色
default 白色
primary 绿色
warn 红色
3 plain 背景色无，是否镂空，只显示边框
4 loading 是否显示加载中
5 form-type
submit 提交表单
reset 重置表单
6 按钮开放能力 open-type

  • contact 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 1.1.0;
    ·需要在微信小程序的后台配置
    • share 触发用户转发，使用前建议先阅读使用指引 1.2.0；
      ·不能把小程序分享到朋友圈
    • getPhoneNumber 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 1.2.0；
      ·不是企业的小程序账号，没有权限来获取用户的手机号码
      1 需要绑定一个事件 bindgetphonenumber
      2 在事件的回调函数中，通过参数来获取信息
      3 获取到的信息是加密的
      · 需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序，就能看到信息了
    • getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 1.3.0
      1 bindgetuserinfo
      2 可以直接获取信息，不存在加密字段
    • launchApp 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明 1.9.5
      1 先在app中，通过app的某个链接 打开小程序
      2 在小程序中打开app
      3 如 找到京东app和京东小程序测试
    • openSetting 打开授权设置页 2.0.7
      1 授权页面中只会出现用户曾经点击过的权限
    • feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 2.1.0
      只能通过真机打开
<button>default</button>
<button size="mini">mini</button>
<button type="primary">primary</button>
<button type="warn">warn</button>
<button type="primary" plain>plain</button>
<button type="primary" loading>loading</button>

<button form-type="submit">submit</button>
<button form-type="reset">reset</button>

 <button open-type="contact">contact</button>
 <button open-type="share">share</button>
 <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
 <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
 <button open-type="launchApp">launchApp</button>
 <button open-type="openSetting">openSetting</button>
 <button open-type="feedback">feedback</button>

// pages/demoButton/demoButton.js
Page({
  // 获取用户的手机号码信息
  getPhoneNumber: function (e) {
    console.log(e)
  },
  // 获取用户个人信息
  getUserInfo: function (e) {
    console.log(e)
  }
})
icon
Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }
})

<!-- icon
 type
 size
 color
 -->
<view class="container">
	<view class="icon-box">
		<icon class="icon-box-img" type="success" size="93"></icon>
		<view class="icon-box-ctn">
			<view class="icon-box-title">成功</view>
			<view class="icon-box-desc">用于表示操作顺利完成</view>
		</view>
	</view>
	<view class="icon-box">
		<icon class="icon-box-img" type="info" size="93"></icon>
		<view class="icon-box-ctn">
			<view class="icon-box-title">提示</view>
			<view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
		</view>
	</view>
	<view class="icon-box">
		<icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
		<view class="icon-box-ctn">
			<view class="icon-box-title">普通警告</view>
			<view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
		</view>
	</view>
	<view class="icon-box">
		<icon class="icon-box-img" type="warn" size="93"></icon>
		<view class="icon-box-ctn">
			<view class="icon-box-title">强烈警告</view>
			<view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</view>
		</view>
	</view>
	<view class="icon-box">
		<icon class="icon-box-img" type="waiting" size="93"></icon>
		<view class="icon-box-ctn">
			<view class="icon-box-title">等待</view>
			<view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
		</view>
	</view>
	<view class="icon-box">
		<view class="icon-small-wrp">
			<icon class="icon-small" type="success_no_circle" size="23"></icon>
		</view>
		<view class="icon-box-ctn">
			<view class="icon-box-title">多选控件图标_已选择</view>
			<view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>
		</view>
	</view>
	<view class="icon-box">
		<view class="icon-small-wrp">
			<icon class="icon-small" type="circle" size="23"></icon>
		</view>
		<view class="icon-box-ctn">
			<view class="icon-box-title">多选控件图标_未选择</view>
			<view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>
		</view>
	</view>
	<view class="icon-box">
		<view class="icon-small-wrp">
			<icon class="icon-small" type="warn" size="23"></icon>
		</view>
		<view class="icon-box-ctn">
			<view class="icon-box-title">错误提示</view>
			<view class="icon-box-desc">用于在表单中表示出现错误</view>
		</view>
	</view>
	<view class="icon-box">
		<view class="icon-small-wrp">
			<icon class="icon-small" type="success" size="23"></icon>
		</view>
		<view class="icon-box-ctn">
			<view class="icon-box-title">单选控件图标_已选择</view>
			<view class="icon-box-desc">用于单选控件中，表示已选择该项目</view>
		</view>
	</view>
	<view class="icon-box">
		<view class="icon-small-wrp">
			<icon class="icon-small" type="download" size="23"></icon>
		</view>
		<view class="icon-box-ctn">
			<view class="icon-box-title">下载</view>
			<view class="icon-box-desc">用于表示可下载</view>
		</view>
	</view>
	<view class="icon-box">
		<view class="icon-small-wrp">
			<icon class="icon-small" type="info_circle" size="23"></icon>
		</view>
		<view class="icon-box-ctn">
			<view class="icon-box-title">提示</view>
			<view class="icon-box-desc">用于在表单中表示有信息提示</view>
		</view>
	</view>
	<view class="icon-box">
		<view class="icon-small-wrp">
			<icon class="icon-small" type="cancel" size="23"></icon>
		</view>
		<view class="icon-box-ctn">
			<view class="icon-box-title">停止或关闭</view>
			<view class="icon-box-desc">用于在表单中，表示关闭或停止</view>
		</view>
	</view>
	<view class="icon-box">
		<view class="icon-small-wrp">
			<icon class="icon-small" type="search" size="14"></icon>
		</view>
		<view class="icon-box-ctn">
			<view class="icon-box-title">搜索</view>
			<view class="icon-box-desc">用于搜索控件中，表示可搜索</view>
		</view>
	</view>
</view>


.icon-box {
	width: 100%;
	display: flex;
	border-bottom: 1px solid #ddd;
	/* justify-content: space-between; */
	align-items: center;
	padding: 10px;
	box-sizing: border-box;
}
.icon-small-wrp{
	width:25%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.icon-box-title{
	margin-bottom: 20px;
}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

radio

radio

radio标签 必须要和父元素radio-group来使用
value 选中的单选框的值
需要给radio-group绑定change事件 在页面中显示 选中的值

<radio-group bindchange="changeRadioSex">
    <radio value="male" color="red" checked="true">男</radio>
    <radio value="femal" color="red" >女</radio>
 </radio-group>

 <view>您选中的是：{{gender}}</view>

//wx.showToast 弹窗提示
Page({
	data: {
		gender: "male"
	},
	changeRadioSex: function(e) {
		this.setData({
			gender: e.detail.value
		})
		if (e.detail.value == "male") {
			wx.showToast({
				title: "男"
			})
		} else {
			wx.showToast({
				title: "女"
			})
		}

	}
})
checkbox
<view>
  
  <checkbox-group bindchange="changeCheckbox">
    <checkbox value="{{item.value}}"  wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
  </checkbox-group>
  
</view>

<view>
您选中的有：{{checkList}}
</view>

Page({
  changeCheckbox:function(e){
    console.log(e)
    this.setData({
      checkList:e.detail.value
    })
  },

  /**
   * 页面的初始数据
   */
  data: {
    checkList:[],
    list:[
      {
        id:0,
        name:"苹果",
        value:"apple"
      },
      {
        id: 1,
        name: "葡萄",
        value: "grape"
      },
      {
        id: 3,
        name: "香蕉",
        value: "banana"
      }
    ]
  },
})

小程序基础学习篇------2020-10-10

hbuildx可以新建小程序项目
在这里插入图片描述

小程序目录结构：
1、微信开发者工具

在这里插入图片描述

2、hbuilderx的目录结构

在这里插入图片描述

公共配置文件：
app.js
//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})
app.json
{
	"pages": [
		"pages/dataBind/dataBind",
		"pages/index/index",
		"pages/logs/logs"
	],
	"window": {
		"backgroundTextStyle": "light",
		"navigationBarBackgroundColor": "#fff",
		"navigationBarTitleText": "WeChat",
		"navigationBarTextStyle": "black"
	},
	"sitemapLocation": "sitemap.json"
}
app.wxss 公共样式

pages 数组的页面路径，放在第一个的页面最先展示

project.config.json
{
	"description": "项目配置文件。",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.0.8",
	"appid": "touristappid",
	"projectname": "test-first",
	"simulatorType": "wechat",
	"simulatorPluginLibVersion": {},
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}
sitemap.json
{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

在单个页面的js中配置：

Page({
  data: {
    motto: 'Hello',
	isGirl:false,
    userInfo: {
		name:"nihao"
	},
    isChecked: true,
	list:[{
		id:0,
		name:"joken"
	},{
		id:1,
		name:"lucy"
	}]
  }
  })
数据绑定

类似vue用{{}}
下面的这种写法是错误的写法【引号和括号之间不能有空格】

 <checkbox checked="   {{isChecked}}"></checkbox>

<view>
	{{motto}}
</view>
<view>
	{{userInfo.name}}
</view>
<view>
	<checkbox checked="{{isChecked}}"></checkbox>
</view>

在这里插入图片描述

运算

运算，即表达式

1、加减运算
2、拼接
3、三目运算

 <view>
	 {{1+1}}
 </view>
 <view>
 	 {{"1"+"1"}}
 </view>
 <view>
 	 {{"1"+1}}
 </view>
 <view>
	 {{isGirl?"女孩":"不是女孩"}}
 </view>

在这里插入图片描述

列表循环

列表循环
1、数组或者对象循环

2、数组循环：wx:key="唯一"
wx:for-item=“数组的项” wx:for-index="数组的索引"
只有一层循环的时候可不写，
当多层嵌套循环的时候，双引号的变量名不能一样

3、对象循环：wx:key="唯一"
wx:for-item=“对象的值” wx:for-index="对象的键"

 <view>
	 <view wx:for="{{list}}" wx:key="id">
		 数组循环：
		 索引：--{{index}}
		 值：--{{item.name}}
	 </view>
 </view>
 
 <view>
 	 <view wx:for="{{userInfo}}"  wx:for-item="value" wx:for-index="key" wx:key="name">
 		 对象循环：
 		 键：--{{key}}
 		 值：--{{value}}
 	 </view>
 </view>

在这里插入图片描述

block标签

block【占位，运行结果小程序会忽略该标签】

<view>
	 <block wx:for="{{list}}" wx:key="id">
		 数组循环：
		 索引：--{{index}}
		 值：--{{item.name}}
	 </block>
 </view>

在这里插入图片描述
在这里插入图片描述

shangrila-xiu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
零基础入门微信小程序开发
GitChat
07-03 34万+
本课程是一个系列入门教程，目标是从 0 开始带领读者上手实战，课程以微信小程序的核心概念作为主线，介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展，另外加上开发工具的安装、小程序发布等内容，共 9 篇文章。
小程序基础篇之页面路由
03-29
借用上面的定义，我们可以理解小程序页面路由，根据路由规则（路径）从一个页面跳转到另一个页面的的规则。通过本篇文 ...       什么是路由？ 我们通常理解的路由指分组数据包从源到目的地时，决定端到端路径的...
微信小程序——语法篇
热门推荐
官方推荐
09-10 4万+
掌握小程序语法快速上手实操一款小程序吧！
学习微信小程序开发
qq_41801633的博客
05-10 2196
微信小程序 API 的调用方式分为同步和异步两种。《微信小程序开发入门与实战》：这是一本新书，由爱编程的小陈撰写，主要适合初学者入门，包括小程序框架的基础知识、开发工具的使用、UI 设计、数据绑定等方面的内容。《小程序开发实践》：这是一本由腾讯云出版的小程序开发教程，内容非常丰富，包括了小程序底层原理、小程序开发流程等方面的内容，非常值得一看。选择靠谱的插件和库：市面上有大量的第三方插件和开源代码库，需要特别注意选择可靠、稳定、更新频繁的插件或库，以确保项目的可靠性和安全性。
【微信小程序】基础篇 -- 案例 - 自定义 tabBar（四十六）
JMFive的博客
03-20 7905
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第46篇文章;今天开始学习微信小程序的第28天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。前面已经介绍了分包-独立分包 & 分包预下载，通过栗子学习了如何设置独立分包以及分包预下载。
【微信小程序】基础篇 -- 网络数据请求（十九）
JMFive的博客
03-03 6168
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第19篇文章;今天开始学习微信小程序的第十天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
【微信小程序丨第三篇】小程序的基础知识储备
weixin_53863933的博客
10-26 1万+
微信小程序在无论在功能、文档及相关支持方面，都是优于前面几种微信账号类型，它提供了很多原生程序才有的接口，使得我们的小程序在很多方面突破H5页面应用的限制，更加接近原生程序的功能，因此微信小程序具有很大的前景想象力。
微信小程序开发学习文档（万字总结，一篇搞定前端开发）
beiye_的博客
12-01 1万+
微信小程序开发学习文档（万字总结，一篇搞定前端开发）
微信小程序开发的学习资料收集
zhan9le的博客
06-28 1万+
小程序开发学习资料集合
【微信小程序】基础篇 -- 全局配置 -- tabBar（十七）
JMFive的博客
03-02 6095
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第17篇文章;今天开始学习微信小程序的第九天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：底部 tabBar顶部 tabBar。
【微信小程序】基础篇 -- 案例 - 本地生活（列表页面）（三十）
JMFive的博客
03-09 1万+
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第30篇文章;今天开始学习微信小程序的第15天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
1基础篇 1：小程序开发基础知识(1).md
03-31
微信小程序开发入门从0到1实现天气小程序
2基础篇 2：小程序云开发基础知识(3).md
03-31
微信小程序开发入门从0到1实现天气小程序
3基础篇 3：小程序架构及其实现机制(1).md
03-31
微信小程序开发入门从0到1实现天气小程序
30小时微信小程序从入门到精通课程-基础篇
06-14
在课程中我将从分为4个阶段讲解微信小程序，"基础篇"，"组件接口篇"，"云开发篇"，"框架篇"，让不同阶段的同学都能有所收获。 本套课程为-基础篇 主要教大家怎么从0基础开始学习各种微信小程序开发基础，包括： ...
【全开源】Java聚合跑腿系统对接云洋聚合跑腿系统源码低价快递小程序APP公众号源码
2401_84593614的博客
05-29 354
随着科技的不断进步和市场的不断拓展，聚合跑腿对接云洋系统源码将在跑腿服务行业中发挥越来越重要的作用。我们期待更多的跑腿平台能够与云洋系统实现对接，共同打造高效便捷的跑腿服务新生态，为人们的生活带来更多便利和舒适。随着科技的进步和市场的扩大，传统的跑腿服务模式正面临着巨大的变革。聚合跑腿对接云洋系统源码的出现，为跑腿服务行业带来了全新的发展机遇。通过聚合跑腿与云洋系统的对接，可以实现跑腿服务的智能化、高效化升级，为消费者和商家提供更加便捷、优质的服务体验。
【全开源】JAVA打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
最新发布
2401_84593568的博客
05-30 519
在数字化快速发展的今天，打车系统小程序已成为我们日常生活中不可或缺的一部分。而背后的关键，则是打车系统小程序的源码。源码是程序的灵魂，它决定了小程序的功能、性能和用户体验。因此，了解并掌握打车系统小程序源码，对于开发者而言，是构建出色打车小程序的重要基础。打车系统小程序源码是构建出色打车小程序的重要基础。通过深入剖析源码的核心技术和优势，我们可以更好地了解打车系统小程序的工作原理和运行机制。同时，掌握源码还能够帮助我们快速构建出符合用户需求的打车系统小程序，为用户带来更加便捷、高效的出行体验。
linux私房菜 基础篇+服务器篇
06-05
《Linux私房菜》分为基础篇和服务器篇两部分，其中基础篇主要介绍了Linux的基本概念、命令行操作、程序设计等内容，适合初学者入门学习。服务器篇则围绕Linux服务器的构建、管理、应用场景等方面展开，适合具备一定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值