微信开发者⼯具介绍及基本使用(1)
1.第⼀个微信⼩程序
1.打开微信开发者工具
注意 第⼀次登录的时候 需要扫码登录
2.新建⼩程序项⽬
3.填写项目信息
4.成功
2. 微信开发者⼯具介绍
详细的使⽤,可以查看官⽹
3.小程序结构目录
小程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服 务。
⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ,以及 JavaScript ,并在视图层与逻 辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
1.小程序文件结构和传统web相比
通过以上对比得出,传统web是三层结构,而微信小程序是四层结构,多了一层配置json
2. 基本的项⽬⽬录
4.小程序配置文件
⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的
page.json
注意:配置文件中不能出现注释
1.全局配置app.json
官网网址查看详细
app.json 是当前⼩程序的全局配置,包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底 部 tab 等。普通快速启动项⽬⾥边的 app.json 配置
字段的含义
- pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径,这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。
- window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊定义等。
- 完整的配置信息请参考 app.json配置
2.页面配置
这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。 开发者可以独⽴定义每个⻚⾯的⼀些属性,如顶部颜⾊、是否允许下拉刷新等等。 ⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容,⻚⾯中配置项会覆盖 app.json的 window 中相同的配置项。
3.sitemap配置-了解即可
sitemap配置网址
⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。
5.模板语法
WXML(WeiXin Markup Language)是框架设计的⼀套标签语⾔,结合基础组件、事件系统,可以构 建出⻚⾯的结构。
1.数据绑定
1-1.普通写法
bool类型
不要直接写 checked= false,其计算结果是⼀个字符串
<checkbox checked="{{false}}"> </checkbox>
1-2.运算
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({data: {a: 1,b: 2,c: 3}
})
逻辑判断
<view wx:if="{{length > 5}}"> </view>
字符串运算
<view>{{"hello" + name}}</view>
Page({data:{name: 'MINA'}
})
注意
花括号和引号之间如果有空格,将最终被解析成为字符串
6.列表渲染
1.wx:for
项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名
下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名
wx:key ⽤来提⾼数组渲染的性能
wx:key 绑定的值 有如下选择
- string 类型,表⽰ 循环项中的唯⼀属性 如
list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"
2… 保留字 *this ,它的意思是 item 本⾝ ,*this 代表的必须是 唯⼀的字符串和数组。
list:[1,2,3,4,5]
wx:key="*this"
代码:
<view wx:for="{{array}}" wx:key="id">{{index}}: {{item.message}}
</view>
Page({data: {array: [{id:0,message: 'foo',}, {id:1,message: 'bar'}]}
})
2.block
渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素
<block wx:for="{{[1, 2, 3]}}" wx:key="*this" ><view> {{index}}: </view><view> {{item}} </view>
</block>
3.wx:if(条件渲染)
在框架中,使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块:
<view wx:if="{{false}}">1</view><view wx:elif="{{true}}">2</view><view wx:else>3</view>
hidden
<view hidden="{{condition}}"> True </view>
类似 wx:if
频繁切换 ⽤ hidden
不常使用 用 wx:if
7.小程序事件的绑定
⼩程序中绑定事件,通过bind关键字来实现。如 bindtap bindinput bindchange 等 不同的组件⽀持不同的事件,具体看组件的说明即可。
1.Wxml
<input bindinput="handleInput" />
2.page
Page({// 绑定的事件handleInput: function(e) {console.log(e);console.log("值被改变了");}
})
3.特别注意
- 绑定事件时不能带参数 不能带括号 以下为错误写法
<input bindinput="handleInput(100)" />
- 事件传值 通过标签⾃定义属性的⽅式 和 value
<input bindinput="handleInput" data-item="100" />
- 事件触发时获取数据
handleInput: function(e) {// {item:100}console.log(e.currentTarget.dataset)// 输入框的值console.log(e.detail.value);}
8.样式wxss
WXSS( WeiXin Style Sheets )是⼀套样式语⾔,⽤于描述 WXML 的组件样式。 与 CSS 相⽐,WXSS 扩展的特性有:
- 响应式⻓度单位 rpx
- 样式导⼊
1.尺寸单位
rpx (responsive pixel): 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在iPhone6 上,屏幕宽度为 375px ,共有750个物理像素,则 750rpx = 375px = 750物理像 750rpx = 375px = 750物理像素 1rpx = 0.5px = 1物理像素 1rpx = 0.5px = 1物理像素 。
建议: 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。
使⽤步骤:
- 确定设计稿宽度 pageWidth
- 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
- 在less⽂件中,只要把设计稿中的 px => 750/pageWidth rpx 即可。
2.样式导入
wxss中直接就⽀持,样式导⼊功能。
也可以和 less中的导⼊混⽤。
使⽤ @import 语句可以导⼊外联样式表,只⽀持相对路径。
示例代码
/** common.wxss **/
.small-p {padding:5px; }
/** app.wxss **/
@import "common.wxss";
.middle-p {padding:15px; }
3.选择器
特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效!
*{margin:0;padding:0;box-sizing:border-box; }
目前支持的选择器有:
9.小程序中使用less
原⽣⼩程序不⽀持 less ,其他基于⼩程序的框架⼤体都⽀持,如 wepy , mpvue , taro 等。 但是仅仅因为⼀个less功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现
- 编辑器是 vscode
- 安装插件 easy less
3.在vs code的设置中加⼊如下,配置
"less.compile": {"outExt": ".wxss"}
4.在要编写样式的地⽅,新建 less ⽂件,如 index.less ,然后正常编辑即可。
10.总结
我们咋本文里学到了怎么创建小程序 然后在小程序中写入内容 我们也通过以上内容了解到了小程序中的每段代码是干嘛的(里面有详细的一一对应)我们又看到了虽然小程序 但是更像原生的js和vue所结合 里面也可以用列表循环条件循环 简单用法 运算 判断 布尔值等等 当然本文中也有一些注意点 在上面我已经标识出来了 好了谢谢观看本篇博客 有什么不对 可以留言提醒我哦
微信开发者⼯具介绍及基本使用(1)相关推荐
- 微信小程序开发自学笔记 —— 九、微信开发者工具
微信开发者工具 介绍 由于小程序渲染和逻辑分离的运行机制与传统的网页存在差异,所以无法使用传统的网页的开发调试工具. 开发者可以借助微信开发者工具完成小程序的代码开发.编译运行.界面和逻辑调试.真机预 ...
- 微信开发者工具 / 反编译工具CrackMinApp 下载安装
微信开发者工具 / 反编译工具CrackMinApp 下载安装 文章目录 微信开发者工具 / 反编译工具CrackMinApp 下载安装 前言 一.微信开发者工具下载安装 二.反编译工具CrackMi ...
- 揭秘经典案例炼成之道 微信开发者大会精华回顾
11月15日,深圳微信开发者大会隆重召开.本次大会主要特色在于邀请各大经典企业号.服务号开发商的技术领袖,分享案例的炼成之道和研发经验,如南航.哈根达斯.招行.欧派.长安汽车等.强大的讲师阵容.紧凑而 ...
- 微信小程序介绍和注册登录
微信小程序介绍和环境准备 1.什么是微信小程序? 2.为什么是微信小程序? 3.微信小程序历史 4.疯狂的微信小程序 5.还有其他的小程序不容忽视 6.体验 7.注册账号 8.获取APPID 9.开发 ...
- 《微信公众平台开发:从零基础到ThinkPHP5高性能框架实践》——3.3 微信开发者中心...
本节书摘来自华章计算机<微信公众平台开发:从零基础到ThinkPHP5高性能框架实践>一书中的第3章,第3.3节,作者 方倍工作室,更多章节内容可以访问云栖社区"华章计算机&qu ...
- 微信开发者平台如何编写代码_编写超级清晰易读的代码的初级开发者指南
微信开发者平台如何编写代码 Writing code is one thing, but writing clean, readable code is another thing. But what ...
- 小程序入门到精通:微信小程序介绍及开发准备工作(一)
1. 什么是小程序? 微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是无需安装,用完即走 ...
- 微信开发者工具提交代码到gitee?
微信Git官网地址: https://gitee.com/ 一.注册Gitee账号 百度经验教程: https://jingyan.baidu.com/article/425e69e6a8cad6ff ...
- mac os 10.8.5下 微信开发者工具安装问题
最近用到微信开发者工具,安装到XP sp3和mac os x 10.8.5都不能正常运行.os x 10.8.5报 wechatwebdevtools 意外退出.微信开发者工具版本:1.01.1710 ...
- 【uni-app】什么是uni-app?如何进行开发?如何连接微信开发者工具与安卓手机端?
文章目录 1 什么是 uni-app 2 如何使用与开发 3 用 HBuilderX 创建项目 4 如何连接微信开发者工具 5 如何连接安卓手机端 1 什么是 uni-app (此部分内容出自 uni ...
最新文章
- java web json_java web中对json的使用详解
- WIN10 软连接释放c盘空间
- leetcode 399. 除法求值(bfs)
- linux标准I/O——流的相关操作
- python读json文件中不同的数据类型_怎么使用python提取json文件中的字段
- 使用TensorFlow,GPU和Docker容器进行深度学习
- 【Java】5 个刁钻的 String 面试题
- PostgreSQL查询计划剖析
- 收集的材料 关于数据库和抓取器方面的
- 你爱我,我爱你,IP被封很头疼【Python爬虫实战:ip代理js逆向采集】
- 如何快速地真正的融入IT行业
- SpringMCV结构
- 计算机控制实验比例环节,自动控制原理实验一典型环节的电路模拟与软件仿真...
- 分析思维模型:SPACE 矩阵
- ubuntu20.04 显卡驱动 cuda cudnn安装
- 拉格朗日乘子法、惩罚函数法
- 状态转移矩阵 matlab,状态转移矩阵计算.PPT
- 房产电商新变数:阿里加码易居
- vuepress打包报错:error Error rendering /:
- 转 从决策树学习谈到贝叶斯分类算法、EM、HMM
热门文章
- android 开机启动无效,Android实现开机自启动无效问题
- OpenSSL密码库算法笔记——第 3.2.2章 利用Barrett约化实现
- 初测ONES项目管理工具,寻求与众不同
- ad采样正弦电压计算c语言程序,TMS320F2812 DSP编程之AD采样精度的校准算法(转)...
- 动漫学日语《你的名字》(更新中)
- 前后端分离的时代,团队间的完美协作
- mysql字段长度的作用_数据库字段的长度 作用
- 英雄联盟显示服务器属于高限制,玩英雄联盟出现超出频率限制,该怎么处理?
- 第4章第3节:如何插入或删除表格的行与列 [PowerPoint精美幻灯片实战教程]
- php实现条形码生成,thinkPHP框架实现生成条形码的方法示例