小程序基础

---

title: 小程序基础
tags:

• 前端
• 微信小程序
  abbrlink: f6d4d8af
  date: 2024-03-24 14:51:01

---

微信小程序基础

常见标签

view视图

<view>hello</view>
<view>你好</view>

text文章

selcectable属性

<!--text相当于span，selectable文档是否可选-->
<text selectable>你好</text>

decode属性

<!--decode为译码如nbsp/lt/gt/amp/apos/ensp/emsp-->
<text decode>世界&nbsp;你好</text>

button按钮

type属性

primary首选按钮

<button type="primary">primary</button>

default默认按钮

<button type="default">default</button>

warn警告

<button type="warn">warn</button>

open-type属性

getPhoneNumber获取电话

<button open-type="getPhoneNumber">PhoneNumber</button>

getUserInfo获取用户信息

<button open-type="getUserInfo">getUserInfo</button>

contact客服

<button open-type="contact">contact</button>

checkbox复选

<!--复选框-->
<checkbox-group>
<checkbox value="1">女</checkbox>
<checkbox value="2">男</checkbox>
</checkbox-group>

radio单选

<radio-group>
<!--单选框-->
<radio value="1">女</radio>
<radio value="2">男</radio>
</radio-group>

block分块

<!--block里的标签属于一体，拆分过多标签堆积-->
<block>
<text style="margin-right: 6px;">首页</text>
<text style="margin-right: 6px;">物品</text>
</block>

input输入

<!--input-->
<input type="text"></input>
<input password></input>
<input type="number"></input>
<input disabled></input>
<input placeholder="请输入" placeholder-class="ph-style"></input>

事件绑定

bindinput相当于vue中的v-model实现双向数据绑定糖衣炮弹

<!--绑定事件-->
<!--bindinput实现双向绑定,data-来帮助传参-->
<input type="text" bindinput="ChangeMe"></input>
<button bindtap="clickMe" data-val1="1" data-test="2" >点击我</button>
<view>{{msg}} </view>

page({
    data:{
 		 msg:"原始数据"
	},
    ChangeMe:function(){
  		console.log("文本框变了");
	},
    //value.currentTarget.dataset可以获取data-的数据
	clickMe:function(value){
  		console.log(value.currentTarget.dataset);
	}
)}

数据绑定

<!--数据绑定MVVM-->
<!--model数据，v是view视图，vm是指page里面内容，是指vm中的一种协调数据和视图的功能-->
<button bindtap="clickMe2">点击我2</button>

page({
    data:{
 		 msg:"原始数据"
	},
    clickMe2:function(event){
  		//只改变数据，不改变视图
  		// this.data.msg="原始数据改变了，视图不变";
  		//视图数据于真实数据一起改变
  		this.setData({
    	msg:"原始数据的内容和视图内容都发生了改变"
 		 })
  	console.log(this.data.msg);
	},
)}

微信API调用

<!--微信API调用-->
<!--获取用户的信息不能使用bindtap来绑定事件，而是使用bindgetuserInfo-->
<!--将open-type="getUserInfo"属性获得的用户数据给到绑定事件getUserInfo-->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取电话</button>
<button open-type="contact" bindcontact="getContact">联系客服</button>

page({
    //获取用户信息
	getUserInfo(e){
  		console.log(e)
	},
	//获取用户电话
	getPhoneNumber(e){
  		console.log(e);
	},
	//联系客服
	getContact(e){
  		console.log(e);
	},
})

富文本标签

<!--富文本控件使用rich-text-->
<!--该标签类似于vue中的v-html可以用来放标签事件而不是单纯的文本--->
<!--img标签只认网络图片，站内路径不会被认识-->
<rich-text nodes="{{msg2}}"></rich-text>

page({
    data:{
 		msg2:"<b>加粗</b><p style='color:red'>变红</p>"
	},
)}

微信弹窗

弹窗样式

<!--小程序弹窗功能-->
<button bindtap="showAlert">弹窗按钮</button>

//弹窗的使用
//一个弹窗事件只能有一次弹窗，如果有两次事件，会被后面的覆盖掉
showAlert(){
  //icon状态:loading(加载)、success（成功选中）、none（提示），duration持续两秒
  wx.showToast({
    title: '成功',
    icon:'success',
    duration:2000
  })
  //showloading是一种icon为loading的简写
  wx.showLoading({
    title: '加载中',
    duration:2000
  })
  //模式窗体二选一
  wx.showModal({
    title: '提示',
    content: '这是一个模式框',
    complete: (res) => {
      if (res.cancel) {
        console.log("点击了取消");
      }
  
      if (res.confirm) {
        console.log("点击了确定");
      }
    }
  })
},

弹窗跳转

<!--页面跳转-->
<button bindtap="navi">页面跳转</button>

//弹窗跳转
navi(){
  wx.navigateTo({
    //不要选定test.wxml是不会默认跳转的
    //当前页面传参到另外的页面?id=1
    url: '/pages/test1/test1?id=1',
  })
},

弹窗前后端交互

<button bindtap='getData'>获取后端数据</button>

//弹窗实现前后端交互request
getData(){
  var that=this;
  wx.request({
    //获取后端数据jobs类
    url: 'http://localhost:10737//jobs',
    //request是一个回调函数，this并不能获取到相关的数据,要用that变量作为中转来实现交互
    success(res){
      var data = res.data;
      that.setData({
        jobs:data
      })
      console.log(that.data.jobs);
    }
  })
}