微信小程序学习笔记之目录结构、基本配置图文详解


Posted in Javascript onMarch 28, 2019

本文实例讲述了微信小程序学习笔记之目录结构、基本配置。分享给大家供大家参考,具体如下:

结束了一段时间的学习,开始一段新的学习旅程 —— 微信小程序。现在出去找工作只会PHP、HTML+CSS、JS什么的不够了,总得会点时下热门的东西,例如微信小程序,有很多企业的招聘要求上写着:“做过微信小程序的优先”、“只要做过微信小程序的”...... 可见微信小程序的热门程度。话(fei)不(hua)多(ting)说(duo),开始学习。

首先在微信公众平台注册小程序账号:

微信小程序学习笔记之目录结构、基本配置图文详解

微信小程序学习笔记之目录结构、基本配置图文详解

 

微信小程序学习笔记之目录结构、基本配置图文详解

使用小程序账号登录微信公众平台,完成基本设置:

微信小程序学习笔记之目录结构、基本配置图文详解

下载微信web开发者工具,安装,打开(如果打不开,参考附录:微信web开发者工具不能打开的问题) 

微信扫码登录开发者工具,然后在本地文件夹创建一个小程序项目

微信小程序学习笔记之目录结构、基本配置图文详解

微信小程序学习笔记之目录结构、基本配置图文详解

(其中AppID在开发设置里面)

微信小程序学习笔记之目录结构、基本配置图文详解

生成小程序示例目录如下:

微信小程序学习笔记之目录结构、基本配置图文详解

全局配置app.json参数:

{
 /**所有页面的路径(省略.wxml后缀),唯一必填项**/
 "pages":[
 "pages/index/index", /**第一项为首页路径**/
 "pages/logs/logs"
 ],
 /**设置窗口**/
 "window":{
 "backgroundTextStyle":"light", /**下拉loading样式,dark或light**/
 "navigationBarBackgroundColor": "#fff", /**导航栏背景颜色 十六进制**/
 "navigationBarTitleText": "WeChat", /**导航栏标题内容**/
 "navigationBarTextStyle":"black", /**导航栏标题颜色 black或white**/
 "navigationStyle":"default", /**导航栏样式 default和custom(只保留右上角胶囊按钮,最低版本6.6.0)**/
 "backgroundColor":"#ffffff", /**窗口背景色**/
 "enablePullDownRefresh":false, /**是否全局开启下拉刷新**/
 "onReachBottomDistance":"50", /**页面上拉触底事件触发时距页面底部距离,单位px**/
 "backgroundColorTop":"#ffffff", /**顶部窗口的背景色(仅iOS支持,最低版本6.5.16)**/
 "backgroundColorBottom":"#ffffff", /**底部窗口的背景色(仅iOS支持,最低版本6.5.16)**/
 },
 /**顶部或底部分栏设置**/
 "tabBar": {
 "list": [{ /**栏目列表(最少2个 最多5个)**/
  "pagePath": "pages/index/index", /**页面路径(必须在pages中先定义)**/
  "text": "首页", /**分栏按钮文字**/
  /**非必填项**/
  "iconPath": "首页", /**icon图标路径**/
  "selectedIconPath": "首页" /**选中时icon图标路径**/
  /*icon说明:大小限制40kb,建议尺寸81px*81px,不支持网络图片。postion为top时不显示*/
 }, {
  "pagePath": "pages/logs/logs",
  "text": "日志"
 }],
 "color":"#ffffff", /**分栏文字颜色**/
 "selectedColor":"#ffffff", /**分栏文字选中颜色**/
 "backgroundColor":"#ffffff", /**分栏背景色**/
 /**非必填项**/
 "borderStyle":"black", /**分栏上边框颜色 black或white**/
 "position":"bottom", /**分栏位置 bottom或top**/
 },
}

页面配置xxx.json参数:

{
 "navigationBarBackgroundColor": "#000000", /**导航栏背景颜色 十六进制**/
 "navigationBarTextStyle": "white", /**导航栏标题颜色 black或white**/
 "navigationBarTitleText": "页面标题", /**导航栏标题内容**/
 "backgroundColor": "#ffffff", /**窗口背景色**/
 "backgroundTextStyle": "dark", /**下拉loading样式,dark或light**/
 "enablePullDownRefresh":false, /**是否全局开启下拉刷新**/
 "onReachBottomDistance":"50", /**页面上拉触底事件触发时距页面底部距离,单位px**/
 "onReachBottomDistance":false, /**设置为 true 则页面整体不能上下滚动;只在页面配置中有效**/
 /**说明:页面的.json只能设置window相关配置项,无需写window这个键。**/
}

工具配置project.config.json参数:

{
	"description": "项目配置文件", /**描述**/
	/**打包配置选项**/
	"packOptions": {
		"ignore": [{
	  "type": "file", /**文件**/
	  "value": "test/test.js"
	 }, {
	  "type": "folder", /**文件夹**/
	  "value": "test"
	 }, {
	  "type": "suffix", /**后缀**/
	  "value": ".webp"
	 }, {
	  "type": "prefix", /**前缀**/
	  "value": "test-"
	 }]
	},
	/**项目设置**/
	"setting": {
		"urlCheck": true, /**是否检查安全域名和TLS版本**/
		"es6": true, /**是否启用 es6 转 es5**/
		"postcss": true, /**上传代码时样式是否自动补全**/
		"minified": true, /**上传代码时是否自动压缩**/
		"newFeature": true
	},
	"compileType": "miniprogram", /**编译类型 miniprogram为普通小程序项目,plugin为小程序插件项目**/
	"libVersion": "2.3.0", /*基础库版本*/
	"appid": "wx1aebd07bdcf596b8", /*项目appid,只在新建项目时读取*/
	"projectname": "ceshi", /**项目名字,只在新建项目时读取**/
	/**调试配置选项**/
	"debugOptions": {
		"hidedInDevtools": []
	},
	"isGameTourist": false, /**小游戏**/
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

WXML模板:充当类似HTML 角色,区别是标签不一致(view、button、text等)、渲染和逻辑分离,多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式。

WXSS 样式:充当类似CSS 角色,仅支持部分CSS选择器,新增尺寸单位rpx,全局样式app.wxss作用于小程序所有页面,局部页面样式page.wxss仅对当前页面生效。

JS 交互逻辑:处理用户操作,例如响应用户的点击、获取用户的位置等。

【例】在页面中点击声明bindtap属性的button,调用JS中声明的clickMe方法来响应这次点击操作,实现把页面中的msg显示为"Hello World"。

测试页面test.js:

//test.js
const util = require('../../utils/util.js')
Page({
 clickMe: function() {
 this.setData({ msg: "Hello World" })
 }
})

测试页面test.wxml:

<!--test.wxml-->
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

微信小程序学习笔记之目录结构、基本配置图文详解

附:微信web开发者工具不能打开的问题解决方法

今天新装的微信开发者工具,安装完成以后就是打不开,点解没有反应,win10   64的系统,各种百度,最后找到解决的方案

微信小程序学习笔记之目录结构、基本配置图文详解

把这些都关闭了就OK了!!!

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
js实现移动端轮播图
Dec 21 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue-cli中使用高德地图的方法示例
Mar 28 #Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 #jQuery
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 #Javascript
vue+iview/elementUi实现城市多选
Mar 28 #Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 #Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 #Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 #Javascript
You might like
星际争霸秘籍
2020/03/04 星际争霸
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
js实现前端图片上传即时预览功能
2017/08/02 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
Python开发的HTTP库requests详解
2017/08/29 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
python实现发送邮件
2021/03/02 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
成品仓管员工作职责
2013/12/29 职场文书
北京奥运会口号
2014/06/21 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
水电工程师岗位职责
2015/02/13 职场文书
交通安全教育心得体会
2016/01/15 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
java多态注意项小结
2021/10/16 Java/Android
分享Python异步爬取知乎热榜
2022/04/12 Python