微信小程序基础1—基本配置和第一个小程序helloworld

1.小程序的代码结构与基本配置

• project.config.json 保存微信开发者工具的配置信息（个性化设置）
• app.js 注册微信小程序应用
• app.json 微信小程序的全局配置（网络请求的超时时间，窗口表现，各个页面的注册路径等）

1. Pages 注册微信小程序的所有页面
2. window属性 用于设置小程序的状态栏、导航条、标题、窗口背景色

• navigationBarBackgroundColor 设置导航栏背景 
• navigationBarTextStyle  设置标题栏颜色仅支持黑白 
• navigationBarTitleText 导航栏标题内容 
• backgroundColor  窗口背景颜色 （下拉刷新背景色） 
• enablePullDownRefresh 下拉刷新控制
• disableScroll 页面是否开启滚动

 

    3.tabBar 如果小程序多tab, 可设置tab栏的表现

    4.networkTimeout 设置网络的超时时间

    5.debug 调试

 

• app.wxss 设置小程序的全局样式
• pages文件夹存放所有小程序的页面 : 每一个小程序页面最多有四个文件组成：js文件，json文件，wxml文件和wxss文件

1. js文件处理小程序的逻辑和数据交互
2. json文件配置小程序页面的配置信息
3. wxml展示页面的元素和内容
4. wxss设置页面的样式

• util.js文件  存放工具 实现代码复用

2. 微信开发者工具写HelloWorld

• 开发者工具的版本：

1. 预览版本  预览小程序在手机上的表现
2. 开发版本  将本地代码上传成具有版本号的小程序的应用
3. 体验版本 
4. 审核版本 
5. 线上版本  小程序通过审核之后发布上线

• 开发者工具调试器模块：

1. console模块：打印小程序页面调试log信息
2. sources模块：脚本文件 可进行断点调试
3. network模块：网络请求状态信息 以及请求资源的响应数据等
4. security模块：调用wx.setStorage和wx.setStorageSync函数时 动态修改缓存数据
5. wxml模块：页面的各个组件元素
6. sensor模块：地理位置信息和设备旋转角度

先写app.js和app.json

• app.js

App函数：传入obj类型参数（生命周期，事件处理函数等）

App({})

 

• app.json 

在pages字段注册小程序所有页面路径，让微信客户端知道小程序定义在哪个目录

(pages里是list类型，存放的是所有页面的路径）

{
  "pages":[
    
  ]
}

创建一个小程序页面，需要四个文件： js , json, wxml, wxss

• helloworld.wxml

hello world

• helloworld.js

Page({})

• helloworld.json

{ }

• helloworld.wxss 配置页面样式

view{
  width:100%;
  height:50rpx;
  text-align: center;
}

3.像素

 在iphone6视图下进行设计，宽度是375rpx，每个组件的rpx比例能够完全还原。

设置组件的宽高：

方法1：设置style

方法2：在wxss中设置该class的样式

#wxss

.user-header{
  height: 350rpx;
  width: 350rpx;
  margin-top: 150rpx;
  border-radius: 50%;
}

#wxml

• 使用wx:if=''{{false}}''可以隐藏该标签' 。
• 使用wx.navigateTo是从父级页面跳转到子级页面（子级页面最多有五级），跳转之后，可返回到父级页面，之前的页面执行onHide（页面隐藏）函数。
• 使用wx.redirectTo是平行页面之间的跳转，不存在子父级之间的关系，跳转之后不可返回到之前的页面，而且之前的页面执行onUnload(页面卸载）函数。
• 在JS文件中，先执行onLoad事件，再读取data中的数据进行数据绑定。
• 冒泡事件：触发子节点的事件时也会触发父节点的事件。bindTap是冒泡事件。
• 非冒泡时间：触发子节点的事件不会触发父节点。catchTap是非冒泡事件。