微信小程序学习笔记目录结构及基本配置详解

阐述了微信小程序学习笔记的目录结构和基本配置。分享给大家参考，如下：

经过一段时间的学习，我开启了新的学习之旅——微信小程序。现在出去找工作还不够，比如PHP，HTML CSS，JS等。现在流行的东西总是要点的，比如微信小程序。很多企业的招聘要求都说：“最好是做过微信小程序”和“只要做过微信小程序”.由此可见微信小程序的普及。说(飞)、(花)、(挺)、(多)，开始学习。

先在微信公众平台注册一个小程序账号：

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

下载、安装并打开微信web开发者工具(如果打不开，参见附录：微信web开发者工具打不开的问题)

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

(其中AppID在开发设置中)

生成小程序的示例目录如下：

全局配置app.json参数：

{/* *所有页面的路径(省略。wxml后缀)，仅必填项* */' Pages ' :[' Pages/index/index '，/* *第一项为第一页路径**/'pages/logs/logs']。/* *设置窗口* */'窗口' : { '背景文本样式' 3360 '浅色'，/* *下拉加载样式，深色或浅色* */' navigationbarbackgroundcolor ' : ' # fff '，/* *导航栏背景颜色hex * */'导航栏标题文本' : '微信'，/* *导航栏标题内容* */'导航栏文本样式' : '黑色'，/* *导航栏标题颜色黑色或白色* */'导航栏样式' 3333333330 ' 最低版本6.6.0) * */'背景色' :' # ffffff '，/* *窗口背景色* */'启用下拉刷新' : false，/* *是否全局打开下拉刷新* */' on每个底部距离' 3360' 50 '，/* *触发页面上的下拉事件时与页面底部的距离，Unit px * */' background colortop ' : ' # ffffff '，/* *顶部窗口的背景色最低版本6 . 5 . 16)* */' backgroundcolorbotom ' 3360 ' # ffffff '，/**底部窗口的背景颜色(仅iOS支持，最低版本6.5.16)**/}，/* *顶部或底部列设置* */' tab bar ' : { ' list ' :[{/* *列列表(至少2个，最多5个)* */'pagepath' 3360' pages/index/。 /* *页面路径(必须首先在页面中定义)**/'text':' home page '，/* *列按钮text * *//* *不需要**/'iconPath':' home page '，/* *图标路径* * * */' selectedIconPath ' : */}在position位于顶部时不显示，{ ' page path ' : ' pages/log/log '，' text' :' log' }]，' color ' 33: ' # fffffffffff

{ ' navigationbarbakgroundcolor ' : ' # 00000 '，/* *导航栏背景色hex * */'导航栏文字样式' : '白色'，/* *导航栏标题色黑色或白色* */'导航栏标题文字' : '页面标题'，/* *导航栏标题内容* */'背景色' : ' # ffffffff '，/* *窗口背景色* */'背景文字样式' : '深色'，/* *下拉加载样式， /* *是否全局开启下拉刷新* */' on每个底距' :' 50 '，/* *触发页面上的下拉事件时离页面底部的距离，以px * */' on每个底距' :为false，/* *如果设置为true，则整个页面不能上下滚动； 仅在页面配置中有效* *//* *说明：只能在中设置窗口相关配置项。页面的json，并且不需要写窗口键。* */}工具配置project.config.json参数：

{'description': '项目配置文件'，/* * description * */* *包配置选项* */' pack options ' : { ' ignore ' :[{ ' type ' : ' file '，/* *文件* */'value '。{'type': 'folder '，/** folder * */'value' : ' test ' }，{'type': '后缀'，/* *后缀* */' value ' : '。webp'}，{'type /**前缀**/'value': 'test-' }]}，/* *项目设置* */' setting ' : { ' URL check ' : true，/* *是否检查安全域名和TLS版本**/'es6': true，/* *是否启用es6到es5**/'postcss': true，/* *上传代码时是否自动完成样式* */' * */' minified ' 330 创建新项目时，插件是applet插件项目**/'libVersion': '2.3.0 '，/*基本库版本*/' appid ' : ' wx1aebd 07 bdcf 596 b 8/*项目appid，只读*/'项目名称' : '史策'，/* *项目名称，只读**//* *调试配置选项* */'调试选项' : { ' hidedinddevtools ' 3360[]}。 IsGameTourist ' : false，/* * games * */' condition ' : { ' search ' : { ' current ' :-1 '，' list' : []}，' conversation ' : { ' current ' :List' : []}、' HTML' : {'CurrentL' :-1、' List' : []}、' Mini Program ' : { ' Current ' :-1、' List' : []}}区别在于标签不一致(视图、按钮、文本等)。)，渲染和逻辑是分开的，并且添加了一些像wx:if这样的属性和像{{}}这样的表达式。

WXSS style:充当类似CSS的角色，仅支持部分CSS选择器，新增维度单元rpx，全局样式app.wxss作用于小程序的所有页面，局部页面样式page.wxss仅在当前页面生效。

JS交互逻辑：处理用户操作，比如响应用户点击，获取用户位置等。

【示例】点击页面上声明bindtap属性的按钮，调用JS中声明的clickMe方法来响应这个点击操作，从而将页面中的msg显示为‘Hello World’。

测试页test.js:

//test . jsconstrutil=require('././utils/util . js’)页面({单击me : function(){ this . setdata({ msg : ' hello world ' })})测试页面test.wxml:

！-test.wxml-view {{msg}}/view按钮bind tap=' click me '单击我/按钮

附件：微信网页开发工具无法打开问题解决方案

今天新安装的微信开发者工具，安装完成后打不开，解决方案不响应。win10 64系统，各种百度，终于找到解决方案

关闭所有这些，你会没事的！

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