weixin_34314962
weixin_34314962

微信小程序项目文件配置介绍

1.公众平台申请账号：

mp.weixin.qq.com/wxopen/ware…

你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。 在设置”-“开发设置” 可以看到小程序的 AppID ,在本地开发新建项目时必须输入自己账号的AppID

2.安装开发者工具

登录后新建项目时，需输入申请的小程序的 AppID(相当于一个身份证，很多地方需要用到)

勾选 "创建 QuickStart 项目" (注意: 你要选择一个空的目录才会有这个选项)

3.项目里边生成了不同类型的文件:

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

1.JSON 配置

QuickStart 项目里边的 app.json 配置内容如下： pages String Array 是 设置页面路径

window	Object	否	设置默认页面的窗口表现

tabBar	Object	否	设置底部 tab 的表现

networkTimeout	Object	否 设置网络超时时间

debug	Boolean	否	设置是否开启 debug 模式
复制代码

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

1.app.json 配置项列表

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "demo1",
    "navigationBarTextStyle":"black"
  }
}
复制代码

pages

数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改，只有在此声明才能创建页面

在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。

文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

window

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

navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"	
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white	
navigationBarTitleText	String		导航栏标题文字内容	
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮	微信版本 6.6.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	是否开启下拉刷新，详见页面相关事件处理函数	
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px
复制代码

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面

当==设置 position 为 top 时，将不会显示 icon== tabBar 中的 ==list 是一个数组==，只能配置==最少2个、最多5个== tab，tab 按数组的顺序排序。

color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色， 仅支持 black/white
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top
复制代码

list 接受一个数组，数组中的每个项都是一个对象

 pagePath	String	是
  页面路径，必须在 pages 中先定义
text	String	是  tab 上按钮文字
iconPath	String	否
图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath	String	否
 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
复制代码

networkTimeout

可以设置各种网络请求的超时时间。

request	Number	否
wx.request的超时时间，单位毫秒，默认为：60000
connectSocket	Number	否
wx.connectSocket的超时时间，单位毫秒，默认为：60000
uploadFile	Number	否
wx.uploadFile的超时时间，单位毫秒，默认为：60000
downloadFile	Number	否
wx.downloadFile的超时时间，单位毫秒，默认为：60000
复制代码

debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

各个页面也可以配置.json，但只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。会覆盖全局的app.json的设置样式

  {
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ccc",
    "navigationBarTitleText": "用户中心"
  }
复制代码

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 ==页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键==

2.WXML 模板

WXML 充当的就是类似 HTML 的角色

MVVM 的开发模式， 不再让 JS 直接操控 DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可

 
  
    
    
      
      {
     {userInfo.nickName}}
    
  
  
    {
     {motto}}
  

复制代码

小程序的 WXML 用的标签是 view, button, text 等等

{ { }} 的语法把一个变量绑定到界面上，需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。


    
      
      {
     {userInfo.nickName}}
    
复制代码

列表渲染

 {
     {item}} 
复制代码

条件渲染


 WEBVIEW 
 APP 
 MINA 
复制代码

模板







复制代码

事件 { {count}} 

Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})
复制代码

组件属性(需要在双引号之内)

  
Page({
  data: {
    id: 0
  }
})

 

 
特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。



{
     {"hello" + name}}

{
     {object.key}} {
     {array[0]}}
复制代码

数组

 {
     {item}} 

Page({
  data: {
    zero: 0
  }
})
最终组合成数组[0, 1, 2, 3, 4]
复制代码

对象


a:1,b:2
{for: 1, bar: 2}


 foo: 'my-foo',
 bar: 'my-bar'
 {foo: 'my-foo', bar:'my-bar'}


obj1:{
    a:1,b:2
}
复制代码

列表渲染 wx:for


{
     {index}}: {
     {item.message}}

   array: [{
  message: 'foo',
}, {
  message: 'bar'
}]
复制代码
{ {idx}}: { {itemName.message}}

   {
     {index}}: 
   {
     {item}} 

复制代码
wx:key
 {
     {item.id}} 
     objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'}
    ],
复制代码

条件渲染 wx:if

wx:elif 和 wx:else 来添加一个 else 块

当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染

hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。 如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

 1 
 2 
 3 
复制代码

block wx:if

并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。


   view1 
   view2 

复制代码
模板

1.定义模板

使用 name 属性，作为模板的名字

2.使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：