快速搭建微信小程序:模板和配置详细介绍

这篇具有很好参考价值的文章主要介绍了快速搭建微信小程序:模板和配置详细介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、小程序 – 模板与配置

1.1 WXML模板语法

数据绑定

  • 在data中定义数据
Page({
    data:{
        //字符串类型数据
        info:'init data',
        //数组类型数据
        msgList:[{msg:'hello'},{nsf:'world'}]
    }
})
  • 在WXML中使用数据
<view>{{ 要绑定的数据名称 }}</view>
//Mustache语法(双大括号)
//应用场景:绑定内容,绑定属性,运算(三元运算、算术运算等)

事件绑定

  • 事件是渲染层到逻辑层的通讯方式

微信小程序模板,前端,小程序,javascript,微信小程序,wxml,wxss

  • 小程序中常用事件
类型 绑定方式 事件描述
tap bindtap 或 bind:tap 手指触摸后马上离开,类似于 HTML 中的 click 事件
input bindinput 或 bind:input 文本框的输入事件
change bindchange 或 bind:change 状态改变时触发
  • 事件对象的属性列表
    • 当事件回调触发的时候,会收到一个事件对象event,它的详细属性如下表所示:
属性 类型 说明
type String 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 触发事件的(源头)组件的一些属性值集合
currentTarget Object 当前(正在触发事件)组件的一些属性值集合
detail Object 额外的信息
touches Array 触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件,当前变化的触摸点信息的数组
  • 事件绑定语法格式:
//wxml
<button type="primary" bindtap="btnTapHandler">按钮</button>

//js
Page({
  btnTapHandler(e){
    console.log(e)
  },  
})
  • 在事件处理函数中为data中的数据赋值
Page({
  data:{
    count:0
  },
  changeCount(){
    this.setData({
      count:this.data.count + 1//修改
    })
  }
})
  • 事件传参
//wxml
<button bindtap = "btnHandler" data-info="{{2}}">事件传参</button>
//通过data-*自定义属性传参

//js
btnHandler(event){
    console.log(event.target.dataset.info)
}
//通过event.target.dataset.参数名获取到具体参数的值
  • bindinput语法格式
    • 通过input事件来响应文本框的输入事件
//wxml
<input bindinput="inputHandler"></input>

//js
Page({
  inputHandler(e){
    console.log(e.detail.value)
  }
})

数据同步

  • 步骤
  1. 定义数据(data数据)
  2. 渲染结构(wxml)
  3. 美化样式(wxss)
  4. 绑定input事件处理函数(js函数)

条件渲染

<view wx:if="{{type === 1}}"></view>
<view wx:elif="{{type === 2}}"></view>
<view wx:else>保密</view>

//要一次性控制多个组件的展示与隐藏,可以使用一个<block> </block>标签将多个组件包装起来,<block>并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。
<block wx: if="{{true}}">
    <view> view1 </view>
	<view> view2 </view>
</block>

//hidden也能控制元素的显示与隐藏
<view hidden="{{condition}}">条件为true隐藏,条件为 false显示</view>
  • wx:if 与 hidden 的对比
    1. 运行方式不同
      • wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
      • hidden 以切换样式的方式(display: none/block;),控制元素的显示与隐藏
    2. 使用建议
      • 频繁切换时,建议使用hidden
      • 控制条件复杂时,建议使用wx:if 搭配wx:elif、wx:else进行展示与隐藏的切换

列表渲染

<view wx:for="{{arr}}">
  索引是:{{index}}, item项:{{item}}
</view>
//默认情况下,当前循环项的索引用index表示;当前循环项用item表示
//也可以手动指定索引和当前项的变量名 wx:for-index="" wx:for-item=""

//小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率
//wxml
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
//js
Page({
  data:{
    userList:[
      {id:1,name:'小红'},
      {id:2,name:'小黄'},
      {id:3,name:'小白'}
    ]
  },
})

1.2 WXSS模板样式

微信小程序模板,前端,小程序,javascript,微信小程序,wxml,wxss

rpx

  • rpx (responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位

  • rpx的实现原理:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)

    • 在较小的设备上,1rpx所代表的宽度较小

    • 在较大的设备上, 1rpx所代表的宽度较大

  • 小程序在不同设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配

设备 rpx换算px (屏幕宽度750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx
  • 开发中建议采用iPhone 6作为视觉设计稿

样式导入

  • 使用WXSS提供的import语法。可以导入外联的样式表
@import "demo.wxss"

全局样式

  • 定义在app.wxss中的样式为全局样式,作用于每一个页面

局部样式

  • 在页面的.wxss文件中定义的样式为局部样式,只作用于当前页面

  • 注意:

    • 当局部样式和全局样式冲突时,根据就近原则局部样式会覆盖全局样式
    • 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式

1.3 全局配置

  • 小程序根目录下的 app.json文件是小程序的全局配置文件。常用的配置项如下:
    • pages:记录当前小程序所有页面的存放路径
    • window:全局设置小程序窗口的外观
    • tabBar:设置小程序底部的tabBar效果
    • style:是否启用新版的组件样式

window

微信小程序模板,前端,小程序,javascript,微信小程序,wxml,wxss

  • 常用配置项
属性名 类型 默认值 说明
navigationBarTitleText String 字符串 导航栏标题文字内容
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,仅支持16进制颜色
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black / white
backgroundColor HexColor #ffffff 窗口的背景色 ,仅支持16进制颜色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh Boolean false 是否全局开启下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px

tabBar

  • tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换,分为底部和顶部两类
  • 只能配置最少2个,最多5个tab页签;渲染顶部tabBar时并不显示icon

微信小程序模板,前端,小程序,javascript,微信小程序,wxml,wxss

  • tabBar配置项:
属性 类型 必填 默认值 描述
position String bottom tabBar 的位置,仅支持 bottom/top
borderStyle String black tabBar 上边框的颜色,仅支持 black/white
color HexColor tab 上文字的默认(未选中)颜色
selectedColor HexColor tab 上的文字选中时的颜色
backgroundColor HexColor tabBar 的背景色
list Array tab 页签的列表, 最少 2 个、最多 5 个 tab
  • 每个tab项的配置选项
属性 类型 必填 描述
pagePath String 页面路径,页面必须在 pages 中预先定义
text String tab 上显示的文字
iconPath String 未选中时的图标路径;当 postion 为 top 时,不显示 icon
selectedIconPath String 选中时的图标路径;当 postion 为 top 时,不显示 icon

1.4 页面配置

  • 小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观、页面效果等进行配置
  • 当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准
  • 常用配置项:(同全局配置项)
属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 当前页面导航栏背景颜色,如 #000000
navigationBarTextStyle String white 当前页面导航栏标题颜色,仅支持 black / white
navigationBarTitleText String 当前页面导航栏标题文字内容
backgroundColor HexColor #ffffff 当前页面窗口的背景色
backgroundTextStyle String dark 当前页面下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh Boolean false 是否为当前页面开启下拉刷新的效果
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为 px

1.5 网络数据请求

  • 出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制:
    • 只能请求HTTPS类型的接口
    • 必须将接口的域名添加到信任列表中

微信小程序模板,前端,小程序,javascript,微信小程序,wxml,wxss

  • 配置域名步骤:登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改request合法域名

  • 注意:

    • 域名只支持https协议
    • 域名不能使用IP地址或localhost
    • 域名必须经过ICP备案
    • 服务器域名一个月内最多可申请5次修改
  • 发起GET请求

wx.request({
      url: 'https://www.escook.cn/api/get', //请求的接口地址,必须是基于https协议
      method:'GET',  //请求的方式
      data:{         //发送到服务器的数据
        name:'xyk',
        age:21
      },
      success:(res=>{  //请求成功之后的回调函数  
        console.log(res)
      })
    })
  • 发起POST请求
wx.request({
      url: 'https://www.escook.cn/api/post', //请求的接口地址,必须是基于https协议
      method:'POST',  //请求的方式
      data:{         //发送到服务器的数据
        name:'xyk',
        age:21
      },
      success:(res)=>{  //请求成功之后的回调函数  
        console.log(res)
      }
    })
  • 页面加载时请求数据
//生命周期函数
onLoad(options) {
  this.getInfo()
  this.postInfo()
},
  • 跳过合法域名检验
    • 我们可以在微信开发者工具中,临时开启「开发环境不校验请求域名、TLS版本及 HTTPS证书」选项,跳过request 合法域名的校验
    • 仅限在开发与调试阶段使用

微信小程序模板,前端,小程序,javascript,微信小程序,wxml,wxss文章来源地址https://www.toymoban.com/news/detail-826099.html

  • 关于跨域和Ajax
    • 跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题
    • Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起Ajax请求”,而是叫做“发起网络数据请求”

到了这里,关于快速搭建微信小程序:模板和配置详细介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序详细介绍

    微信小程序自发布以来,逐渐进入到我们的生活中,成为我们生活中不可或缺的一部分,但你真的了解微信小程序的由来吗?本篇文档为大家一 一讲解 微信小程序,小程序的一种,英文名 Wechat Mini Program ,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”

    2024年02月09日
    浏览(35)
  • 【微信小程序 | 实战开发】配置微信小程序APPID并快速接入

    你是否想要掌握人工智能的最新技术和应用?你是否想要成为未来社会的创新者和领导者?你是否想要和全球的优秀导师和同学一起学习和交流?如果你的答案是肯定的,那么欢迎来到床长人工智能教程网站,这里是你实现梦想的起点! 个人名片: 🐼 作者简介:一名大一在

    2024年01月24日
    浏览(63)
  • 搭建微信小程序环境及项目结构介绍

    访问微信公众平台,将鼠标的光标置于 账号分类 中的 小程序 上, 点击‘ 查看详情 ’ 点击“ 前往注册 ” 下方也可以 点击注册 : 小程序注册页面 : 步骤a :进入 小程序注册页 ,根据指引 填写信息 和 提交相应的资料 ,完成账号申请。 注意: 每个邮箱 仅能申请一个小程

    2024年02月07日
    浏览(47)
  • 微信小程序之WXSS模板样式、页面配置(.json)和网络数据请求

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年01月24日
    浏览(59)
  • 详细介绍微信小程序app.js

    这一节,我们详细介绍app.js 这个文件。这个文件的重要性我就不再赘述,前面已经介绍了。 任何一个程序都是需要一个入口的,就好比我们在学c++的时候就会有一个main函数,其他语言基本都是一样。很明确的说,这里的app.js对于基于js-基础模板建立的项目,它就是我们这个

    2024年04月15日
    浏览(43)
  • 从零开始快速搭建SpringBoot+Mybatis+小程序应用--微信小程序的入门和前后端的联调

    目录 项目介绍  vx小程序简介 VX开发工具介绍 列表页开发 list的编写   列表页前后端联调  信息编辑页开发 operation的编写 区域信息编辑页的联调 从0搭建后端的Springboot+mybatis框架 实现后端的业务功能 实现本地微信小程序的前端开发 前端与后端的调控 技术储备要求 1.基础的

    2024年02月10日
    浏览(65)
  • 华为云零代码新手教学-体验通过Astro Zero快速搭建微信小程序

    您将学会如何基于Astro零代码能力,DIY开发,完成问卷、投票、信息收集、流程处理等工作,还能够在线筛选、分析数据。实现一站式快速开发个性化应用,体验轻松拖拽开发的乐趣。 环境准备 注册华为云账号、实名认证 如果您已拥有华为账号且已通过实名认证,可直接体

    2024年02月12日
    浏览(40)
  • 微信小程序配置npm构建详细解读

    npm 支持 | 微信开放文档 总之就是,1、开启  2、根据谁进行构建,指定构建后生成的位置      1、 在项目根目录 npm init  生成package.json文件    2、npm install  安装要使用的模块 如· npm i @vant/weapp -S --production    3、 微信开发工具  【工具】-》【构建npm】 构建成功会生成

    2024年02月16日
    浏览(39)
  • 关于微信公众号的h5页面跳转微信小程序的详细介绍

    关于微信公众号跳转小程序的功能,我也是研究了一整天才弄好的,主要是微信官方文档写的不清楚,百度上的各种文章也各说各的,不过最后还是要相信官网文档,接下来我会一步一步分析,希望对你有帮助,并且最后会贴上全部代码。 一、条件 已认证的 服务号 ,服务号

    2024年02月10日
    浏览(59)
  • 快速搭建美团外卖(第三方)微信小程序(附精选源码32套,涵盖商城团购等)

    ​ 1、数据请求: [flyio.js]同时支持浏览器、小程序、Node、Weex的基于Promise的跨平台http请求库。可以让您在多个端上尽可能大限度的实现代码复用 2、css预编译器: [stylus]-基于Node.js的CSS的预处理框架 3、数据来源:[EasyMock]-为测试提供模拟数据 4、整体框架: mpvue 5、地图:腾讯地图

    2024年02月05日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包