简介

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。

工具

1.下载开发工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.安装

3.开发者工具快捷键

1.界面

  • Ctrl + shift + T: 工具栏
  • trl + shift + D: 模拟器
  • Ctrl + shift + E: 编辑器
  • Ctrl + shift + T: 目录树
  • Ctrl + shift + I: 调试器

2.工具

  • Ctrl +B: 编译
  • Ctrl +R: 刷新
  • Ctrl + shift + P: 预览(自动预览)
  • Ctrl + shift + U: 上传

3.编辑

  • Ctrl + shift + F: 格式化代码
  • Ctrl + P: 跳转文件
  • Ctrl + E: 最近文件
  • Ctrl + [: 代码行向左缩进
  • Ctrl + ]: 代码行向右缩进
  • Ctrl +shift + [: 折叠代码块
  • Ctrl + shift + ]: 打开代码块
  • Alt + Up: 上移动一行
  • Alt + Down: 下移动一行
  • Shift + Alt + Up: 向上复制一行
  • Shift + Alt + Down:向下复制一行
  • Ctrl + shift + enter: 在当前行上方插入一行
  • Ctrl + shift + F: 全局搜索

4.光标

  • Ctrl + End:移动到文件结尾
  • Ctrl + Home:移动到文件开头
  • Ctrl + I:选中当前行
  • Shift + End: 选择从光标处到行尾
  • Shift + Home: 选择从行首到光标处
  • Ctrl + shift + L: 选中所有匹配
  • Ctrl +D: 选中最近的匹配
  • Ctrl + U: 光标回退

小程序配置

1.全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

相关配置项

属性 类型 必填 描述 最低版本
pages string[] 页面路径列表
window Object 全局的默认窗口表现
tabBar Object 底部 tab 栏的表现
networkTimeout Object 网络超时时间
debug boolean 是否开启 debug 模式,默认关闭
functionalPages boolean 是否启用插件功能页,默认关闭 2.1.0
subpackages Object[] 分包结构配置 1.7.3
workers string Worker 代码放置的目录 1.9.90
requiredBackgroundModes string[] 需要在后台使用的能力,如「音乐播放」
plugins Object 使用到的插件 1.9.6
preloadRule Object 分包预下载规则 2.3.0
resizable boolean iPad 小程序是否支持屏幕旋转,默认关闭 2.3.0
navigateToMiniProgramAppIdList string[] 需要跳转的小程序列表,详见 wx.navigateToMiniProgram 2.4.0
usingComponents Object 全局自定义组件配置 开发者工具 1.02.1810190
permission Object 小程序接口权限相关设置 微信客户端 7.0.0
sitemapLocation string 指明 sitemap.json 的位置
style string 指定使用升级后的weui样式 2.8.0
useExtendedLib Object 指定需要引用的扩展库 2.2.1
entranceDeclare Object 微信消息用小程序打开 微信客户端7.0.9

属性

page:用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。

"pages": [
"pages/home/home",
"pages/kind/kind",
"pages/cart/cart",
"pages/user/user",
"pages/detail/detail",
"pages/map/map"
]

window:用于设置小程序的状态栏、导航条、标题、窗口背景色。

"window": {
"navigationBarBackgroundColor": "#00FF00",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "超购",
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark",
"backgroundColorTop": "#ccc"
}

tabar:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面(最少2个,最多5个)

"tabBar": {
"color": "#333",
"selectedColor": "#00FF00",
"backgroundColor": "#efefef",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "resources/tabBar/home.png",
"selectedIconPath": "resources/tabBar/home_active.png"
},
{
"pagePath": "pages/kind/kind",
"text": "分类",
"iconPath": "resources/tabBar/kind.png",
"selectedIconPath": "resources/tabBar/kind_active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "resources/tabBar/cart.png",
"selectedIconPath": "resources/tabBar/cart_active.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "resources/tabBar/user.png",
"selectedIconPath": "resources/tabBar/user_active.png"
}
]
}

更多相关内容移步官方文档

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

实例

{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/index",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
]
}

2.页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

相关配置项

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000
navigationBarTextStyle string white 导航栏标题颜色,仅支持 black / white
navigationBarTitleText string 导航栏标题文字内容
navigationStyle string default 导航栏样式,仅支持以下值:
default 默认样式
custom 自定义导航栏,只保留右上角胶囊按钮
微信客户端 7.0.0
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle string dark 下拉 loading 的样式,仅支持 dark / light
backgroundColorTop string #ffffff 顶部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
backgroundColorBottom string #ffffff 底部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
enablePullDownRefresh boolean false 是否开启当前页面下拉刷新。
详见 Page.onPullDownRefresh
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位为px。
详见 Page.onReachBottom
pageOrientation string portrait 屏幕旋转设置,支持 auto / portrait / landscape
详见 响应显示区域变化
2.4.0 (auto) / 2.5.0 (landscape)
disableScroll boolean false 设置为 true 则页面整体不能上下滚动。
只在页面配置中有效,无法在 app.json 中设置
usingComponents Object 页面自定义组件配置 1.6.3

配置实例

{
"navigationBarBackgroundColor": "#00FF00",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "超购-首页",
"backgroundColorTop": "#efefef",
"backgroundTextStyle": "light",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50,
"usingComponents": {
"prolist": "/components/proList/proList"
}
}

自定义组件

创建自定义组件,接受一个 Object 类型的参数

定义

  • 点击 “+”选择目录,输入components
  • 右键点击components目录,选择目录, 输入prolist
  • 右键点击prolist目录,选择 新建Component ,输入prolist 即可



(组件名自取)

组件使用

  • 在json文件中注册组件

"usingComponents": {
"prolist": "/components/proList/proList"
}
  • 在wxml文件中使用

WXML语法

WXML 中的动态数据均来自对应 Page 的 data。

1.简单绑定(类似于vue中的Mustache 语法)

数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:内容

<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
}

2.控制属性(需要在双引号之内)

<view wx:if="{{flag}}"> 显示 </view>
Page({
data: {
flag: true
}
})

3.boolean以及number数据类型

如果数据类型是booblean 或者number类型的数据,需要使用{{}}包裹

<checkbox checked="{{false}}"> </checkbox>
<view data-num = "{{100}}"></view>

4.表达式运算 可以在 {{}} 内进行简单的运算,支持三元运算、算数运算、逻辑判断、字符串运算等

<view test="{{flag ? true : false}}"> 属性 </view>

<view> {{a + b}} + {{c}} + d </view>

<view wx:if="{{len > 5}}"> </view>

<view>{{"hello" + name}}</view>

5.列表渲染

wx:for(vue中使用v-for)

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

列表渲染必须添加 wx:key指令, 来指定列表中项目的唯一的标识符。

key值可以设置为索引值

Page({
data: {
cityData: [
{
city: '大连'
},
{
city: '长沙'
},
{
city: '重庆'
},
{
city: '北科'
},
{
city: '北科'
},
{
city: '广州'
},
{
city: '深圳'
},
{
city: '郑州'
},
{
city: '南京'
},
{
city: '成都'
},
{
city: '合肥'
},
]
}
}) <view wx:for="{{cityData}}" wx:key="index">
<text>{{index}}</text>
<text>{{item.city}}</text>
</view>

特此声明:如需转载请注明出处,如有疑问请及时提出以便于改正,如有侵权,联系删除,谢谢

逆战:微信小程序(一)的更多相关文章

  1. 逆战:微信小程序

                                                            微信小程序的生命周期 onLaunch: function(options) { // ...

  2. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  3. 微信小程序体验(2):驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

  4. 微信小程序(微信应用号)组件讲解

    这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...

  5. 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  6. 通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...

  7. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  8. 来自于微信小程序的一封简讯

    9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客 一夜之间火了的微信应用号你真的知道吗? ...

  9. 微信小程序前端源码逻辑和工作流

    看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...

随机推荐

  1. Python——捕获异常

    一.什么是异常 """异常:错误,bug处理异常:尝试执行某句可能出现异常的语句, 若出错则用正确的代码去替代. try: 可能发生错误的代码except: 如果出现异常 ...

  2. jmeter导入jmx文件报错:missing class com.thoughtworks.xstream.converters.ConversionException

    有的时候我们会参考别人的jmx文件,但是在导入的时候会报错如下图: 实际上是告诉我们缺少jar包所引起的,下载对应jar包放到jmeter安装目录对应的lib/ext下就可以了,如下图: jmeter ...

  3. ES集群调整搜索速度

    一.内存文件系统足够的缓存 Elasticsearch严重依赖于文件系统缓存,以加快搜索速度.通常,您应确保至少有一半的可用内存分配给文件系统缓存,以便Elasticsearch可以将索引的热区保留在 ...

  4. 退役记——CCC2020&CCO2020

    我叫吴佳诚,一个曾在福建师大附中就读的oier,2019年7月份我来到多伦多就读于Langstaff Secondary School 我的常用id有:Johnson_Wu,温词 竞赛经历: 2018 ...

  5. The ADB binary found at ... 虚拟机运行错误

    虚拟机问题,可以说差点扼杀我开发 APP 的乐趣,哼,最后请教了一下辉哥(学长),终于解决 —— 用真机调试.下面是步骤: 首先,检查一下真机连接需要的 SDK 是否安装,未安装,勾选进行安装 接着用 ...

  6. 关于所学,及JNI问题

    上周每天学习Java两个小时,随后两个小时里对教材上的例子进行验证,学会了如何使用Javac对文件进行终端编译,输出,但由于所下载的 jdk版本问题出现了JNI问题,正在尝试解决.并学会了如何使用ec ...

  7. Pikachu-URL重定向

    不安全的url跳转 不安全的url跳转问题可能发生在一切执行了url地址跳转的地方.如果后端采用了前端传进来的(可能是用户传参,或者之前预埋在前端页面的url地址)参数作为了跳转的目的地,而又没有做判 ...

  8. Docker入门(windows安装)

    Docker入门(安装)Docker是一种轻量级容器技术,实际中直接运行在当前操作系统(Linux)上,而不是虚拟机中.PaaS提供了存储,数据库,网络,负载均衡,自动扩展等功能,Docker云平台就 ...

  9. 数据类型(8种)和运算符——Java

    一.什么是标识符,它有什么作用(重点掌握) 1. 标识符指的是 标识符是用户编程时使用的名字,用于给变量.常量.函数.语句块等命名,以建立起名称与使用之间的关系.标识符可由任何字母数字字符串形成. 2 ...

  10. 使用SFTP连接Centos

    1.centos已经配置好了SFTP,直接使用root用户连接就可以,模式选SFTP即可. 2.虽然端口号没有填写,默认端口号是22 3.可能还是会遇到无法访问的问题,可以进行iptables防火墙的 ...