小程序开发笔记

小程序开发
- 一、小程序基础组件
- 二、函数和事件
- 三、变量
- - 变量声明与变量类型转换
  - 数组和对象
  - 内置对象
- 四、数据绑定
- 五、wxml页面渲染
- 六、WXSS样式美化
- 七、组件
- 八、API
- - 1、授权登录
  - 2、生命周期

小程序开发

一、小程序基础组件

<view> </view><text> </text>//https://developers.weixin.qq.com/miniprogram/dev/component/input.html
//  type:text   文本输入键盘
// number   数字输入键盘
// idcard   身份证输入键盘
// digit    带小数点的数字键盘
// safe-password    密码安全输入键盘 指引
<input> </input>//https://developers.weixin.qq.com/miniprogram/dev/component/button.html
<button> </button>

二、函数和事件

函数

//函数的两种声明方式onLoad:function(){}onLoad(){}//函数的调用
test(){this.test2("csm")
},
test2(name){//日志打印console.log("I am",name)
}

可以根据日志打印的内容过滤日志：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KbpcakH1-1639656615061)(C:\Users\19783\AppData\Roaming\Typora\typora-user-images\image-20211213193722821.png)]

点击事件

//bindtap会执行后台的getValue函数
<text> bindtap="getValue"</text>//每当输入框值改变就会执行
<input bindinput="getInput"></input>


getInput(value){//输入用户输入的值console.log(value.detail.value)
}

三、变量

变量声明与变量类型转换

//声明 变量类型有：Number, String, Boolean, Undefined, Null
var value = 0
let value2 = 0 //用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束//获取数据类型
console.log(typeof(value))//数据类型转换,转字符
var a = 1 + ""
var b = true + ""var c = 1
var str = c.toString()
var str2 = String(c)//其他类型转数值
var d = "2"
var n = Number(d)     //浮点，整数都可以转换
var f = parseFloat(d)
var i = parseInt(d)

数组和对象

//数组
var nums = [1,2,3]
var nums2 = new Array()
//长度
nums.length
//末尾添加元素
nums[3] = "test"
nums.push("test")
nums.push("aaa",4,5,6)
//在开头添加元素
nums.unshift(0)
//删除最后元素
nums.pop()
//删除开头元素
nums.shift()//对象
//第一种
var obj = {name:"bert",age:18,fun:function(){console.log("bert test");}
}//第二种
var obj2 = new Object();
obj2.name = "csm"
obj2.fun = function(){console.log("csm test")
}//第三种,构造函数,适用于批量创建对象
function Obj(name){this.name = name,this.fun = function(){console.log("xxc test")}
}
var obj3 = new Obj("xxc")
obj3.fun()

内置对象

参考文档：MDN https://developer.mozilla.org/zh-CN/docs/Web/javaScript

//随机数 0 <= x < 1
Math.random()
Math.random()*(max - min) + minMath.round(x)
返回四舍五入后的整数
Math.ceil(x)
返回大于一个数的最小整数，即一个数向上取整后的值。
Math.floor(x)
返回小于一个数的最大整数，即一个数向下取整后的值
Math.pow(x, y)
返回一个数的 y 次幂。
Math.max([x[, y[, …]]])
返回零到多个数值中最大值。
Math.min([x[, y[, …]]])
返回零到多个数值中最小值。
Math.abs(x)
返回一个数的绝对值。//日期
var date = new Date()
var date2 = new Date(2021,12,14,19,29)
var date3 = new Date('2021-12-14 19:30:00')
var date4 = new Date(1000)//时间戳 ms//日期获取
var date = new Date()
var time = date.getTime()//时间戳
date.getFullYear()//获取nian
date.getMonth()
date.getHours()
date.getMinutes()
date.getSeconds()//数组
var arr = new Array()
console.log(arr instanceof Array)
console.log(Array.isArray(arr))//翻转数组
arr.reverse()
//排序数组,默认是转为字符串排序
arr.sort()//数值数组排序
arr.sort(function(a,b){return a-b //升序
})arr.indexOf(3) //返回3的第一个索引
arr.lastIndexOf(3) //返回3的最后一个索引arr.toString() //数组转字符串

四、数据绑定

<!-- 数据绑定的两种方式-->
<text>{{name}}</text>
<img src="{{src}}" />

Page({data:{name:"bert",src:"image/img1.png"},getInput(event){//不会实时显示this.data.name = "csm"//数据的动态绑定，实时显示this.setData({name:event.detail.value}) }
})//绑定全局变量
const app = getApp()app.globalData.name = "bert"

五、wxml页面渲染

<!-- 条件渲染-->
<text wx:if="{{age => 18}}"> 您满18，可以进网吧！</text>
<text wx:if="{{age < 18}}"> 您不满18，不可以进网吧！</text><text wx:if="{{cj >= 90}}">优秀</text>
<text wx:elif="{{cj>=60}}">及格</text>
<text wx:else="{{cj<60}}">不及格</text><!--循环渲染 list:[{name:"csm",wechat:"11111"},{name:"bert",wechat:"22222"}] -->
<view wx:for="{{list}}"><view>{{item.name}}</view><view>{{item.wechat}}</view>
</view>

六、WXSS样式美化

菜鸟教程：https://www.runoob.com/css/css-tutorial.html

颜色

background-color:#FFFFF;

文本

/*居中*/
text-align:center/*文本下划线*/
text-decoration:underline;/*字体*/
font-size:30px;

边距

padding:10px;
margin:10px;
border:1px solid red;
border-radius:10px;

适配问题

//px 与rpx的转换
//整个屏幕宽：750rpx,在iphone6下1px = 2rpx

flex布局：

display:flex;
flex-direction:column;
justify-content:center;  //水平
align-items:center;      //垂直

七、组件

图片:https://developers.weixin.qq.com/miniprogram/dev/component/image.html

//默认宽高：320px *240px
<image src="/images/picture.png" ></image>
//模式：
<image mode=""></image>
//懒加载
<image   lazy-load="true"></image>

视频：https://developers.weixin.qq.com/miniprogram/dev/component/video.html

<video    show-play-btn src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

轮播图:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

<!-- 方法1 -->
<swiper indicator-dots indicator-active-color="blue" autoplay><swiper-item class="num1"><image class="img" src="https://img0.baidu.com/it/u=986567382,3731968355&fm=26&fmt=auto"></image></swiper-item><swiper-item class="num2"><image class="img" src="https://img0.baidu.com/it/u=599045285,3012701325&fm=26&fmt=auto"></image></swiper-item><swiper-item class="num3"><image class="img" src="https://img2.baidu.com/it/u=182878036,307711730&fm=253&fmt=auto&app=120&f=JPEG?w=724&h=439"></image></swiper-item>
</swiper><!-- 方法2 -->
<swiper indicator-dots indicator-active-color="blue" autoplay><swiper-item wx:for="{{imageList}}"><image class="img" src="{{item}}"></image></swiper-item>
</swiper>

TabBar:

页面切换，在app.js添加：

 "tabBar": {"custom": true,"color": "#000000","selectedColor": "#000000","backgroundColor": "#000000","list": [{"pagePath": "page/component/index","text": "组件","iconPath":"","selectedIconPath":""}, {"pagePath": "page/API/index","text": "接口","iconPath":"","selectedIconPath":""}]}

navigator页面跳转:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

<navigator url="/page/navigate/navigate?title=navigate" open-type="redirect" hover-class="navigator-hover">跳转到新页面</navigator>

navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	对应 wx.redirectTo 的功能
switchTab	对应 wx.switchTab 的功能
reLaunch	对应 wx.reLaunch 的功能	1.1.0
navigateBack	对应 wx.navigateBack 的功能	1.1.0
exit	退出小程序，`target="miniProgram"`时生效	2.1.0

API操作页面跳转：

//带数据的页面跳转
goNew(e){var title = e.currentTarget.dataset.titleurlnew = '/pages/detail?title='+titlewx.navigateTo({url:urlnew})
}<view wx:for="{{list}}">
<view class="item" bindtap="goNew" data-title="{{item}}">{{item}</view>
</view>//获取参数
onLoad(e){}

打开别的小程序：

wx.navigateToMiniProgram({appId:""
})

scroll-view:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

<scroll-view>
内容区域
</scroll-view>

属性	类型	默认值	必填	说明	最低版本
scroll-x	boolean	false	否	允许横向滚动	1.0.0
scroll-y	boolean	false	否	允许纵向滚动	1.0.0
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件	1.0.0

八、API

1、授权登录

获取用户信息

 wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {this.setData({userInfo: res.userInfo,hasUserInfo: true,imgPath:res.userInfo.avatarUrl})console.log("授权成功")},fail:(res)=>{console.log("授权失败")}})//如果写成success(res){ this.setData({})}会报错，不能用this，需要在外面定义var that = this

退出登录

unlogin(){this.setData({userInfo: null,hasUserInfo: false})wx.setStorageSync("user", null)  //清除缓存中的用户信息}

缓存用户信息：

wx.setStorageSync("user", res.userInfo)

取出缓存中的用户信息：

  onLoad: function (options) {var user = wx.getStorageSync('user')console.log(user)}

2、生命周期

页面生命周期：

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

属性	类型	说明
data	Object	页面的初始数据
options	Object	页面的组件选项，同 `Component` 构造器中的 `options` ，需要基础库版本 2.10.1
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onShareTimeline	function	用户点击右上角转发到朋友圈
onAddToFavorites	function	用户点击右上角收藏
onPageScroll	function	页面滚动触发事件的处理函数

//分享小程序到朋友圈
onShareAppMessage:function(){return {title:"来自xxx的分享"}
},
onShareTimeline:function(){return {title:'分享xxx小程序到朋友圈'}
}

小程序生命周期：https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

属性	类型	必填	说明
onLaunch	function	否	生命周期回调——监听小程序初始化。
onShow	function	否	生命周期回调——监听小程序启动或切前台。
onHide	function	否	生命周期回调——监听小程序切后台。

【微信小程序开发笔记】相关推荐

微信小程序开发笔记，你收藏了吗？
** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
微信小程序开发笔记——wsdchong
微信小程序开发笔记一.小程序简介小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...
微信小程序开发笔记进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用
文章目录一.前言二.onfire.js介绍三.API介绍四.实例应用五.onfire源码六.实例源码一.前言微信小程序开发笔记--导读二.onfire.js介绍一个简单实用的事件订 ...
微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记支付篇②——微信小程序通过小程序云实现微信支付功能
文章目录一.前言二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署四.小程序调用 4. ...
微信小程序开发笔记（1.1）滚动选择器picker的使用
微信小程序开发笔记(1.1)滚动选择器picker的使用前言滚动选择器picker 普通选择器多列选择器时间选择器日期选择器省市区选择器前言最近被拉来做小程序,因为时间比较赶,其他方面 ...
微信小程序开发笔记—设置页面密码
文章目录一.功能概述二.实现效果三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...

【微信小程序开发笔记】