微信小程序(一)-工具创建和结构配置说明 Stable Build
按装前特别说明: windows最好下载32位的,不然用到用到后面就出现"网络连接失败",然后就登录不上去了,打不开编辑器了!
问题 : 微信开发者工具网络连接失败, “网络连接失败”error:unable to verify the first certificate 的提示。
解决办法 : 就是按装32位,然后重启,将设置中的代理设为"不使用任何代理,勾选后直链网络",如果还不行,重复上面的操作,卸载,再装,启动,设置,再重启电脑,再启动.
终级解决方法===>重装系统再装小程序!
正式操作流程如下:
1.下载:https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
2.按装:直接下一步就完成.
3.使用
3.1测试号学习
3.2 基本目录结构(小程序是四层结构)
基本结构 | 类型文件 | 传统web |
---|---|---|
页面结构 | wxml | HTML |
页面样式 | wxss | css |
程序逻辑 | js | js |
程序配置 | json | 无 |
一个页面四个文件


3.3配置文件说明
3.3.1全局配置
小程序根目录下的 app.json
文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
完整配置项说明请参考小程序全局配置
以下是一个包含了部分常用配置选项的 app.json
:


{
"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"
]
}
app.json
完整配置项说明请参考小程序全局配置
常用字段说明

02.window字段:全局的默认窗口表现,用于设置小程序的状态栏、导航条、标题、窗口背景色。
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window
03.tabBar字段:底部 tab
栏的表现,切换时显示的对应页面。
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar


"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "小区平台",
"iconPath": "icon/home.png",
"selectedIconPath": "/icon/home.png"
},
{
"pagePath": "pages/block/block",
"text": "本幢事宜",
"iconPath": "icon/home.png",
"selectedIconPath": "/icon/home.png"
},
{
"pagePath": "pages/story/story",
"text": "小区趣事",
"iconPath": "icon/home.png",
"selectedIconPath": "/icon/home.png"
},
{
"pagePath": "pages/account/account",
"text": "小区账本",
"iconPath": "icon/home.png",
"selectedIconPath": "/icon/home.png"
},
{
"pagePath": "pages/user/user",
"text": "我的信息",
"iconPath": "/icon/home.png",
"selectedIconPath": "/icon/home.png"
}
],
"color":"#330000",
"selectedColor":"#FF6600",
"backgroundColor":"#FFFFFF"
},
tabBar
每一个小程序页面也可以使用同名 .json
文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json
的 window
中相同的配置项。
完整配置项说明请参考小程序页面配置
例如:
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}


{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#0094ff",
"navigationBarTitleText": "本幢事宜!平台协助!",
"navigationBarTextStyle":"black"
}
本幢事宜导航配置
3.3.3sitemap 配置
小程序根目录下的 sitemap.json
文件用来配置小程序及其页面是否允许被微信索引。
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html
微信小程序(一)-工具创建和结构配置说明 Stable Build的更多相关文章
- 从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计
使用微信小程序开发已经很长时间了,对小程序开发已经相当熟练了:但是作为一名对技术有追求的前端开发,仅仅熟练掌握小程序的开发感觉还是不够的,我们应该更进一步的去理解其背后实现的原理以及对应的考量,这可能 ...
- 微信小程序开发工具测评
1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...
- 微信小程序开发工具使用与设计规范(二)
[未经作者本人同意,请勿以任何形式转载] 上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 ...
- 从微信小程序开发者工具源码看实现原理(四)- - 自适应布局
从前面从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计可以知道,小程序大部分是通过web技术进行渲染的,也就是最终通过浏览器的dom tree + cssom来生成渲染树:既然最终是通 ...
- 5款微信小程序开发工具使用报告,微信官方开发工具还有待提升
微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维. api提示不全,要一个个查api啊,写代码超级慢啊 很 ...
- 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?
原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复 ...
- 微信小程序开发工具中快捷键
微信小程序开发工具表面上是没有更多的样式类的工具,例如缩进.隐藏代码什么的. 现在总结一下小程序开发工具常用的一些快捷键: 格式调整 Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ct ...
- ubuntu系统安装微信小程序开发工具
在ubuntu系统中安装微信小程序开发工具之前,先要安装wine与git 一.安装wine 1.如果您的系统是64位,启用32位架构(如果您还没有) sudo dpkg --add-architect ...
- 微信小程序开发工具
微信小程序 1● 工具下载 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 2● webchart_devto ...
随机推荐
- BGP总结(二)
BGP属性 路由器发送关于目标网络的BGP更新消息,更新的度量值被称为路径属性.属性可以是公认的或可选的.强制的或自由决定的.传递的或非传递的.属性也可以是部分的.并非组织的和有组合都是合法的,路径属 ...
- SQL系列总结——基础篇(一)
数据库与表.列的关系其实就像是一个Excel工作薄(workbook)与Excel表格(sheet)以及表格中的列的关系一样.关系数据库中最基本的对象有3个:表.列.用户 基本的概念名词 ...
- Java 复习整理day09
package com.it.demo01_thread; /* 案例: 多线程简介. 概述: 指的是进程有多条执行路径, 统称叫: 多线程. 进程: 指的是可执行程序, 文件(例如: .exe) 大 ...
- markdown编辑器typora本地图片上传到自己的服务器
typora是windows平台下最受欢迎的markdown书写工具和查看工具,本篇文章将会介绍如何在typora平台使用java脚本程序自动上传本地图片到自己的服务器,从而让markdown文章中的 ...
- python爬虫selenium相关
首先上很好用的selenium中文文档,基本上所有问题都能通过阅读此文档解决.可惜好像没找到翻译者名称. https://python-selenium-zh.readthedocs.io/zh_CN ...
- Codeforces Global Round 7 D2. Prefix-Suffix Palindrome (Hard version)(Manacher算法)
题意: 取一字符串不相交的前缀和后缀(可为空)构成最长回文串. 思路: 先从两边取对称的前后缀,之后再取余下字符串较长的回文前缀或后缀. #include <bits/stdc++.h> ...
- 母函数 <普通母函数(HDU - 1028 ) && 指数型母函数(hdu1521)>
给出我初学时看的文章:母函数(对于初学者的最容易理解的) 普通母函数--------->HDU - 1028 例题:若有1克.2克.3克.4克的砝码各一 枚,能称出哪几种重量?各有几种可能方案? ...
- Codeforces Round #650 (Div. 3) C. Social Distance (前缀和)
题意:有一排座位,要求每人之间隔\(k\)个座位坐,\(1\)代表已做,\(0\)代表空座,问最多能坐几人. 题解:我们分别从前和从后跑个前缀和,将已经有人坐的周围的位置标记,然后遍历求每一段连续的\ ...
- windows 系统下安装kibana和sense
目前最新版本已经不需要安装sense了,而是使用Dev Tools工具: 下面进行下载和安装kibana. 点击下载:https://artifacts.elastic.co/downloads/ki ...
- codevs1169传纸条 不相交路径取最大,四维转三维DP
这个题一个耿直的思路肯定是先模拟.. 但是我们马上发现这是具有后效性的..也就是一个从(1,1)开始走,一个从(n,m)开始走的话 这样在相同的时间点我们就没法判断两个路径是否是相交的 于是在dp写挂 ...