微信小程序开发--页面结构
<p><strong><span style="font-size: 18px">一、微信小程序开发--页面文件组成</span></strong></p><ul>
<li><strong>.js</strong>
<ul>
<li style="list-style-type: none">
<ul>
<li>页面逻辑文件，用于创建页面对象，以及处理页面生命周期控制和数据处理 </li>
</ul>
</li>
</ul>
</li>
<li><strong>.wxml</strong>
<ul>
<li style="list-style-type: none">
<ul>
<li>wxml指的是Wei Xin Markup Language</li>
<li>用于定义页面元素结构的. 语法遵循XML语法，不是HTML语法</li>
</ul>
</li>
</ul>
</li>
<li><strong>.json （可选）</strong>
<ul>
<li style="list-style-type: none">
<ul>
<li>设置当前页面的Window的配置，此处会覆盖app.json中的window设置，也就是说，只可以设置window中设置的属性。</li>
</ul>
</li>
</ul>
</li>
<li><strong>.wxss （可选）</strong>
<ul>
<li style="list-style-type: none">
<ul>
<li>wxml指的是 Wei Xin Style Sheet</li>
<li>用于定义页面样式的语法，语法遵循Css语法，扩展了css的基本用法和长度单位 （主要是rpx 响应式像素）</li>
</ul>
</li>
</ul>
</li>
</ul>
<p><span style="font-size: 18px"><strong>二、微信小程序开发--应用程序设置(app.json)</strong></span></p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><em><strong><span style="font-size: 14pt">注：如果需要用代码，请把注释删除或换行</span></strong></em><br><span style="font-size: 14px">{
"pages": [ //pages:用来配置页面路径的
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light", //下拉 loading 的样式，仅支持 dark / light
"navigationBarBackgroundColor": "#219bf9", //导航条的背景颜色
"navigationBarTitleText": "WeChat", //导航栏标题文字内容
"navigationBarTextStyle": "black" //导航栏标题颜色，仅支持 black / white
"enablePullDownRefresh":true, //是否全局开启下拉菜单刷新
"backgroundColor":"#eee" //页面背景颜色
},
"debug":true, //可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。
"sitemapLocation": "sitemap.json",
"tabBar":{
"selectedColor":"#e3eeeo", //tab 上的文字选中时的颜色，仅支持十六进制颜色
"backgroundColor": "#666", //tab 的背景色，仅支持十六进制颜色
"color": "#333", //tab 上的文字默认颜色，仅支持十六进制颜色
"borderStyle": "black", //tabbar 上边框的颜色， 仅支持 black / white
"list":[ //tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
{
"text": "index", //tab 上按钮文字
"pagePath":"pages/index/index", //页面路径，必须在 pages 中先定义
"iconPath":"pages/images/1.jpg", //图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
"selectedIconPath":"pages/images/1.jpg" //选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
},
{
"text": "logs",
"pagePath":"pages/logs/logs",
"iconPath": "pages/images/2.jpg",
"selectedIconPath":"pages/images/2.jpg"
}
]
}
}
</span></pre>
</div>
<p> </p>
<div> </div>
<div>
<div><span style="font-size: 18px"><strong>三、微信小程序开发--页面应用程序设置(page.json)</strong></span></div>
<blockquote>每个单独的页面下都有一个.json文件，这里面的内容只可以覆盖app.json文件中的window里面的内容。</blockquote>
<div><strong><span style="font-size: 18px">四、微信小程序逻辑层的JavaScript和平时用的JavaScript的区别。</span></strong></div>
<blockquote><ol>
<li>小程序不是运行在浏览器上的，所以没有BOM和DOM对象。</li>
<li>小程序的JS有一些额外的成员</li>
</ol>
<ul>
<li style="list-style-type: none">
<ul>
<li style="list-style-type: none">
<ul>
<li>App 方法 用于定义应用程序实例对象</li>
<li>Page 方法 用于定义页面对象</li>
<li>getApp 方法 用于获取全局应用程序对象</li>
<li>getCurrentPages 方法 用于获取当前页面的调用栈（数组，最后一个元素就是当前页面） </li>
<li>wx对象 用来提供核心API</li>
</ul>
</li>
</ul>
</li>
</ul>
<p> 3.小程序的JS支持CommonJS规范的</p>
<ul>
<li style="list-style-type: none">
<ul>
<li style="list-style-type: none">
<ul>
<li>exprot 导出</li>
<li>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">function say(){
console.log("我是Say方法")
}
//导出
module.exports = {
say:say
} </pre>
</div>
</li>
<li>import 导入</li>
<li>require 引用</li>
<li>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">const util = require('../../utils/util.js')
</pre>
</div>
<p> </p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</blockquote>
<div> </div>
</div><br><br>
来源：https://www.cnblogs.com/DreamchaserHe/p/11151983.html
頁:
[1]