做视频网站带宽要,网站产品详情页怎么做,如何把做好的网站代码变成网页,企业建立网站账户如何做一、导入小程序 选择代码目录 项目配置文件 appid 当前小程序的 AppIDprojectname 当前小程序的项目名称 变更AppID#xff08;视情况而定#xff0c;如果没有开发权限时需要变更成个人的 AppID#xff09;
二、模板语法
在页面中渲染数据时所用到的一系列语法叫做模板…一、导入小程序 选择代码目录 项目配置文件 appid 当前小程序的 AppIDprojectname 当前小程序的项目名称 变更AppID视情况而定如果没有开发权限时需要变更成个人的 AppID
二、模板语法
在页面中渲染数据时所用到的一系列语法叫做模板语法对应到 Vue 中就是指令的概念。
2.1 数据绑定 插值 {{}} 小程序中使用 {{}} 实现数据与模板的绑定与 Vue 中不同的是无论是属性的绑定还是内容的绑定都必须要使用 {{}}。 !-- 此处的 false 是字符串的 false因此布尔结果为 true --
switch checkedfalse /
!-- 如下才是正确表示布尔值 false 的方法 --
switch checked{{false}} /简易数据绑定 小程序中提供了 model:value{{数据名}} 语法来实现双向的数据绑定但是目前只能用在 input 和 textarea 组件中。
本节中用到的演示代码如下
!-- 数据绑定 --
view classbinding!-- 开关组件 --switch checked{{ isOpen }}/!-- 双向数据绑定 --input typetext model:value{{ message }} /view classmessage{{ message }}/view
/viewPage({data: {isOpen: true,message: hello world!}
})2.2 条件渲染
控制属性相当于 Vue 中指令的概念在小程序中做控制属性 wx:if 根据表达式的值渲染内容值为真时显示wx:else 用在 wx:else 的后面不可单独使用wx:if 表达式值为假时显示 组件属性 hidden 根据表达式的值渲染内容值为真时隐藏通过 [hidden] { display: none; } 来实现内容的隐藏
本节中用到的演示代码如下
!-- 条件渲染 wx:if 和 wx:else --
view classwelcometext wx:if{{ isLogin }}大师兄/texttext wx:else游客/text你好:
/view!-- 条件渲染 hidden --
view classloading!-- 可以单独使用 --!-- text wx:if{{ !loaded }}正在加载.../text --text hidden{{ loaded }}正在加载.../text
/viewPage({data: {isOpen: true,message: hello world!,isLogin: true,loaded: false}
})2.3 列表渲染
wx:for 根据数组重复渲染组件内容 index 默认值访问数组的索引值item 默认值访问数组的单元值 wx:key 列表项的唯一标识符不使用 {{}} 数组单元是对象时只需要写属性名数组单元是简单类型时推荐使用 *this wx:for-index 自定义访问数组索引的变量名wx:for-item 自定义访问数组单元的变量名
本节中用到的演示代码如下
!-- 列表渲染 --
view classstudentsview classitemtext序号/texttext姓名/texttext年龄/texttext性别/texttext级别/text/viewview classitemtext1/texttext贺洋/texttext20/texttext男/texttext菜鸟/text/view
/view
!-- 简单数组 --
view classhistorytext小米/text
/viewPage({data: {isOpen: true,message: hello world!,isLogin: true,loaded: false,students: [{id: 1, name: 贺洋, age: 20, gender: 男, level: 菜鸟},{id: 2, name: 唐刚, age: 18, gender: 女, level: 笨鸟},{id: 3, name: 常超, age: 20, gender: 女, level: 老鸟}],history: [苹果, 华为, OPPO, 三星]}
})三、内置API
内置 API 实际上就是小程序提供的一系列的方法这些方法都封装在了全局对象 wx 下调用这些方法实现小程序提供的各种功能如网络请求、本地存储、拍照、录音等。
3.1 网络请求
调用 wx.request 能够在小程序中发起网络请求与后端接口进行数据的交互其语法格式如下
wx.request({url: 这里是接口的地址,method: 这里是请求的方法,data: 请求时提交的数据,header: {/* 请求头信息 */},success: () {/* 成功的回调 */},fail: () {/* 失败的回调 */},complete: () {/* 成功或失败的回调 */}
})本节中用到的演示代码如下
button classbutton sizemini typeprimary查询书单/button
view classbooksview classitemtext序号/texttext名称/texttext作者/texttext出版社/texttext操作/text/viewview classitemtext1/texttext西游记/texttext吴承恩/texttext人民文学出版社/texttext删除/text/view
/viewPage({data: {books: []},// 调用数据接口的方法getBooks() {// 调用小程序的 API 发起请求wx.request({url: https://hmajax.itheima.net/api/books,method: GET,data: {creator: zhangsan},success: (result) {// 更新数据渲染页面this.setData({ books: result.data.data })}})}
})3.2 界面交互 wx.showLoading 显示 loading 提示框 title 文字提示内容 mask 是否显示透明蒙层防止触摸穿透 wx.hideLoading 隐藏 loading 提示框 wx.showToast 消息提示框轻提示 mask 是否显示透明蒙层防止触摸穿透duration 延迟时间提示框显示多久icon 指定图标none 不使用图标
3.3 本地存储
wx.setStorageSync 存入一个数据复杂类型数据不需要 JSON.stringify 处理wx.getStorageSync 读取一个数据复杂类型数据不需要 JSON.parse 处理wx.removeStorageSync 删除一个数据wx.clearStorageSync 清空全部数据
本节中用到的演示代码如下
!-- 本地存储 --
view classstoragebutton sizemini typeprimary存数据/buttonbutton sizemini typeprimary读数据/buttonbutton sizemini typeprimary删数据/buttonbutton sizemini typeprimary清数据/button
/view3.4 API 特征
小程序中提供的 API 数量相当的庞大很难也没有必要将所有的 API 全部掌握但是这些 API 具有一些共有的特征
异步 API绝大部分的 API 都是异步方式通过回调函数获取 API 执行的结果 success API 调用成功时执行的回调fail API 调用失败时执行的回调complete API 调用结束时执行的回调无论成功或失败 同步 API部分 API 支持以同步方式获取结果这些 API 的名称都以 Sync 结尾如 wx.getStorageSync 等Promise部分异步的 API 也支持以 Promise 方式返回结果此时可以配合 asyc/await 来使用
3.5 相册/拍照
wx.chooseMedia 调起摄像头拍照或读取相册内容该 API 既支持回调方式获取结果也支持 Promise 方式返回结果
view classpreview bind:taponChooseimage src{{ avatar }} modeaspectFill /
/viewPage({// 用于页面渲染的数据data: {avatar: },// 选择图片async onChoose() {// 推荐使用 async await 的写法减少不必要的回调地狱const res await wx.chooseMedia({mediaType: [image],count: 1})this.setData({avatar: res.tempFiles[0].tempFilePath})}
})3.6 小练习
本节搜索历史练习用到的演示代码如下
!-- 搜索历史 --
view classhistoryview classsearch-barinput typetext /text classlabel搜索/text/viewview classtitle历史搜索 text classicon-deletex/text/viewview classkeywordsnavigator url/pages/test/index小米/navigatornavigator url/pages/test/index苹果/navigatornavigator url/pages/test/index华为/navigator/view
/view四、事件处理
4.1 事件对象
前面已经介绍过小程序事件监听的语法bind:事件类型事件回调但是小程序的事件回调不支持传参数因此要将模板中的数据传递到事件回调中就必须要通过事件对象来实现。
小程序事件回调函数的第1个参数即为事件对象事件对象中包括了一些有用的信息
Page({eventHandler(ev) {// 查看事件对象console.log(ev)}
})本节练习用到的演示代码如下
!-- 搜索框 --
view classsearch-barinput typetext placeholder输入搜索关键字 /
/view
!-- 页面主体 --
view classpage-bodyscroll-view scroll-y classasideview wx:for{{6}} wx:key*this classitem/view/scroll-viewscroll-view scroll-y refresher-enabled classcontentview wx:for{{6}} wx:key*this classitem/view/scroll-view
/view4.2 组件事件
前面介绍的 tap 事件可以在绝大部分组件是监听我们可以将其理解为通用事件类型然而也有事件类型只属于某个组件我们将其称为组件事件。
scroll-view 组件中的事件
bind:scrolltolower 当滚动内容到达底部或最右侧时触发bind:refresherrefresh 执行下拉操作时触发refresher-enable 启用自定义下拉刷新
本节练习用到的演示代码如下
Page({data: {isPulling: false},onScrollPulling() {// 请求最新的数据wx.request({url: https://hmajax.itheima.net/api/books,data: {creator: zhangsan},success: (result) {},complete: () {// 停止下拉刷新this.setData({isPulling: false})}})}
})表单组件中的事件
change 表单数据发生改变时触发input 不支持submit 表单提交时触发button 按钮必须指定 form-type 属性
本节练习用到的演示代码如下
!-- 用户信息 --
view classregisterformview classform-fieldlabel for姓名:/labelview classfieldinput typetext placeholder请输入您的姓名 //view/viewview classform-fieldlabel for性别:/labelview classfieldradio-groupradio value男 checked /男radio value女 /女/radio-group/view/viewview classform-fieldlabel for爱好:/labelview classfieldcheckbox-groupcheckbox value写代码 checked /写代码checkbox value睡大觉 /睡大觉/checkbox-group/view/viewview classform-fieldlabel for籍贯:/labelview classfieldpicker moderegion请选择籍贯/picker/view/viewbutton sizemini typeprimary保存/button/form
/view五、生命周期
生命周期是一些名称固定自动执行的函数。
5.1 页面生命周期
onLoad 在页面加载完成时执行只会执行 1 次常用于获取地址参数和网络请求onShow 在页面处于可见状态时执行常用于动态更新数据或状态onReady 在页面初次渲染完成时执行只会执行 1 次常用于节点操作或动画交互等场景onHide 在页面处于不见状态时执行常用于销毁长时间运行的任务如定时器
本节练习用到的演示代码如下
view classhistoryview classtitle历史搜索/viewview classkeywordsnavigatorwx:for{{history}}wx:key*thisurl/pages/test/index{{item}}/navigator/view
/viewview classform-fieldinput typetext placeholder请输入手机号 /textwx:if{{time 0}}bind:tapgetSMSCodeclasslabel获取短信验证码/texttext wx:else classlabel{{time}}后重新获取/text
/view// 定时器ID
let timer null
Page({data: {history: [],time: 0},getSMSCode() {let time 60 // 初始数据// 倒计时timer setInterval(() {// 停止定时器if(--time 0) return clearInterval(timer)this.setData({time}) // 渲染结果}, 1000)},
})5.2 应用生命周期
onLaunch 小程序启动时执行1次常用于获取场景值或者启动时的一些参数如自定义分享onShow 小程序前台运行时执行常用于更新数据或状态onHide 小程序后台运行时执地常用于销毁长时间运行的任务如定时器
本节练习用到的演示代码如下
// pages/lifetimes/index.js
Page({// 小程序转发/分享onShareAppMessage() {return {title: 小程序学习,path: /pages/index/index?test测试数据,imageUrl: /static/images/cover.png}}
})
