小程序

开发流程
微信开发者工具
小程序开发文档

小程序项目结构

静态页面的构成
- HTML：结构
- css:样式
- js:行为
小程序

页面全部存放在pages, 而且pages目录只能存放页面
- 页面包括4个文件，pages/页面名/页面名.js(wxss,json,wxml)
  - 4个文件的文件名必须一致
  - 4个文件
    - .js 页面逻辑
    - .json 页面配置
    - .wxml 页面结构
    - .wxss 页面样式
app.js 是小程序入口文件，先忽略掉
app.json
- pages配置的数组，是有序的。第一个就是模拟器显示的页面

{// 所有的页面路径都应该配置在这个数组里面，如果没有配置，如果跳转"pages":["pages/index/index","pages/logs/logs"],//全局窗口样样式"window":{"backgroundTextStyle":"light",//导航栏方案的背景色"navigationBarBackgroundColor": "#fff",//导航栏的文案"navigationBarTitleText": "等你回家",//导航栏方案的前景色"navigationBarTextStyle":"black"}
}

app.wxss 全局样式

基本标签的使用

组件文档

组成程序的页面的并不是HTML标签，而是小程序的组件

text：显示文本的
- 相当于是span标签，是行内元素
view包裹作用
- 相当于是div
image 就是显示图片

默认的高度和宽度
开发时，需要设置高度和宽度

button按钮
- size:mini :表示小的按钮

<button>默认的按钮</button>
<button size="mini">小按钮</button>

语法——数据绑定

{{}}：数据绑定使用 Mustache 语法（双大括号）将变量包起来

文本渲染：

 <!-- 文本渲染，使用{{}} --><text>{{msg}}</text>

属性绑定

 <!-- 属性绑定,{{}} --><image src="{{imgUrl}}"></image>

条件渲染
1. wx:if和wx:else是固定写法，不能改
2. 条件满足就渲染，如果不满足不移除dom

 <!-- 条件判断{{}}如果条件满足就展示对应的dom --><view wx:if="{{isHandsome}}">很帅      </view><view wx:else>丑B</view>

列表渲染
1. wx:for 是固定写法
2. 默认的元素别名item，索引别名index
3. wx:for-item可以指定元素别名
4. ？ 的值以两种形式提供
  1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

 <!-- 遍历,{{}}默认的元素别名item,默认的索引别名index --><view wx:for="{{movieList}}" wx:key="*this">{{item}}--{{index}}</view>

注意点
可以在微信开发者工具，调试器可以看到当前页面的data属性，也可以改

{{}}可以写表达式

 <view class="box {{isRed?'red':''}}"></view>

语法——注册事件与消息提示框

注册事件
显示提示框

注册事件
- 在结构中注册事件
- 事件名有很多，但是最基本是tap事件
  PC 端使用 click 事件，移动端用 top 事件

 <button bind事件名="事件处理方法">点我呀</button>

事件处理方法声明在和data平级

 Page({事件处理方法(){}})

消息提示框

wx.showToast({title: '点疼我了',  //提示的文案// icon:'loading'icon:'none', //提示框图标duration:3000,//提示时长mask:true //是否显示遮罩
})

语法模块化

小程序中也支持模块化的概念:es6模块化

作用：
- 把一些公共的代码抽离为作为一个单独js
使用：
- 直接使用ES6的模块化

传送门：https://es6.ruanyifeng.com/#docs/module
使用方法
- 在模块js中暴露方法属性或者对象

// 对外暴露
export default sayHello

需要使用模块的js里面引入

// 引入模块
import sayHello from '../../utils/hello'

注意点：
import路径不支持绝对路径，所以写相对路径即可

方法中的this

小程序中的 this 指向就的当前小程序页面实例，可以通过 this 取得对象上的属性与方法

方法访问data属性 this.data.属性名
方法访问方法 this.方法名
改变data属性 this.setData({属性名:值})

小程序基本标签与语法相关推荐

标签云打印/微信小程序蓝牙标签打印开放平台功能
微信小程序蓝牙标签打印/标签云打印开放平台(www.herro.cn),是在云端部署的云平台,支持开发者通过API调用完成标签蓝牙打印或标签云打印功能. 平台蓝牙打印模块支持各厂商各品牌蓝牙标签打印 ...
微信小程序蓝牙标签打印/标签云打印开放平台（2）
微信小程序蓝牙标签打印/标签云打印开放云平台(下面简称"平台" www.herro.cn 技术服务TEL:15759216805),支持开发者通过API调用完成标签蓝牙打印或标签云 ...
微信小程序蓝牙标签打印/标签云打印开放云平台（4）
微信小程序蓝牙标签打印/标签云打印开放云平台(下面简称"平台" www.herro.cn 技术服务TEL:15759216805),支持开发者通过API调用完成标签蓝牙打印或标签云 ...
微信按钮android代码实现原理,微信小程序button标签open-type实现原理
这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信 ...
微信小程序时间标签与范围联动设计实现
微信小程序时间标签与范围联动设计实现?最近忙于一个有关数据管理的微信小程序开发,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.pic ...
小程序左右标签滑块排行榜
小程序左右标签滑块排行榜效果: <view class="menu"><view class="{{currentTab==0?'select':'d ...
基于微信小程序Map标签及高德地图开源方法实现路径导航
微信小程序自带地图map标签,他是基于canvas画图功能进行的地图渲染,同时依赖微信的getlocation获取经纬度,绘制周边地图.地图上可以标点,画线,查看当地地理信息.但是自带的导航功能模块不 ...
第21课微信小程序视频标签显示弹幕
第21课微信小程序视频标签显示弹幕效果图如下: wxml代码如下: <videosrc="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideo ...
微信小程序组件(标签)—码虫带你飞
微信小程序组件(标签) 组件文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 常用布局标签 <view></view&g ...

小程序基本标签与语法

小程序

小程序项目结构

基本标签的使用

语法——数据绑定

语法——注册事件与消息提示框

语法模块化

方法中的this

小程序基本标签与语法相关推荐

最新文章

热门文章