微信小程序 -- Tracy 的小笔记

管理项目 +

目录

Json 文件

WXML 文件

js 文件

WXSS 样式文件

小程序组件

---

创建新的项目 + 普通快速启动模板

Json 文件

• app.json 和 config.json 是作用于项目的, page 里的 json 是针对页面的
  project.config.json : 用来配置开发这个项目的个性化的配置， 包括平台的文字颜色， 代码上传方式之类的， 等你换电脑开发的时候就不用重新配置
• app.json
  1. page : String 类型; 必填；设置页面路径
     
     
     demo code :
     "pages":[
     "pages/index/index", //数组的第一项代表小程序开启时候的第一个页面;
     "pages/logs/logs", //页面是不加后缀的(such as : index.xml)， 系统会对每个页面文件夹里的4个files进行整合
     "pages/test/tracy"
     ],
     
     在页面进行新增和删除的时候也要修改这里， 否则会报错。
     我们有一个快捷的方法来添加页面 就是直接在这个 code 里新建一个路径 ： such as "pages/test/addOnePage" 这样直接写 code 即可， 这样省去了手动添加文件夹和文件的过程, 写完点击 “编译”
  2. window : Object; 设置页面窗口表现
     
     Demo code:
     "window":{
     "backgroundColor":"#000000", //窗口背景颜色
     "backgroundTextStyle":"light", //下拉背景字体了; loading 图的样式，仅支持 "light/dark"
     "enablePullDownRefresh" : false, //是否开启下拉刷新
     "navigationBarBackgroundColor": "#fff", //导航栏背景颜色， 默认白色
     "navigationBarTitleText": "WeChat",
     //导航标题栏文字内容 "navigationBarTextStyle":"black" //导航栏标题颜色， 仅支持 "white/black"
     "onReachBottomDistance" : 50, // 页面"上拉触底事件" 触发时 距页面底部距离, 单位为 px; 它是和JS 文件中的函数 "onReachBottom" 绑定的， 这里可以写触底事件
     }
  3. 触底事件 demo:
     onReachBottom:function()
     {
     console.log("控制台打印触底事件")
     }
  4. tabBar : Object; 设置底部 tab 的表现 demo (微信下方的 "发现"， "我")
     Demo code:
     "tabBar": {
     "color": "#a9b7b7", //文字颜色
     "selectedColor": "#11cd6e", // 高亮颜色
     "borderStyle": "black", //tabBar 上边框的颜色， 仅支持 "Black/White"
     "position" : "bottom", //tabBar 的位置， 可选值 bottom/top
     "list": // item 最多5个 最少2个[
     
     {
     "selectedIconPath
     "images/icon_consult_press.png", //高亮icon,当 tabBar position 为 Top 的时候该值无效， 不支持网络图片
     "iconPath":
     "images/icon_consult.png", //默认icon, 当 tabBar position 为 Top 的时候该值无效， 不支持网络图片
     "pagePath": "pages/index/index", // 页面路径
     "text": "首页"
     },
     {
     "selectedIconPath": "images/icon_invest_press.png",
     "iconPath": "images/icon_invest.png",
     "pagePath": "pages/logs/logs",
     "text": "一元投"
     },
     
     {
     "selectedIconPath": "images/icon_mine_press.png",
     "iconPath": "images/icon_mine.png",
     "pagePath": "pages/mine/mine",
     "text": "我的"
     }
     ]
     }
  5. networkTimeout : Object; 设置各种网络超时时间， 超过这个最大请求时间则不再请求
     Demo code:
     "networkTimeout": {
     "request" : 20000,
     "connectSocket" : 20000,
     "downloadFile" : 20000,
     "uploadFile": 20000,
     }
  6. debug : Boolean; 设置是否开启 debug 模式, 可以帮助开发者快速定位一些常见的问题
     
     Demo code:
     "debug" : true
• page.json
  1. 我们在 page.json 设置的属性会覆盖 app.json 的属性, 因为page.json 只能设置和 Windows 一样的属性， 所以说就不能再次写 ："window":{ } 这样了, 直接写下面的属性就可以了
  2. "navigationBarBackgroundColor": "#fff", //导航栏背景颜色， 默认白色
  3. "navigationBarTextStyle":"black" //导航栏标题颜色， 仅支持 "white/black"
  4. "navigationBarTitleText": "WeChat",
     //导航标题栏文字内容
  5. "blackgroundColor":"#fff", //窗口的背景颜色
  6. "enablePullDownRefresh" : false, //是否开启下拉刷新
  7. "onReachBottomDistance" : 50, // 页面"上拉触底事件" 触发时 距页面底部距离, 单位为 px
  1. 只有页面json才有的属性：
  2. "disableScroll" : false, //设置为 true, 则页面整体不能上下滚动

WXML 文件

• {{}} //数据绑定， 前端WXML 文件调用后台JS 变量， 达到视图层和逻辑层的通信
  • 内容绑定
    <view> {{message}} </view> //这里的 message 是 页面JS 文件里定义的变量
  • 组件属性绑定
    <view id="item-{{itemNumber}}"></view>
  • 控制属性绑定
    <view wx:if="{{condition}}"></view>
  • 关键字绑定
    <checkbox checked="{{false}}"></checkbox>
  • 绑定内进行运算
    三元运算： <view hidden="{{flag?true:false}}"></view>
    算术运算： <view> {{a+b}} + {{c}} + d </view>
    逻辑运算： <view wf:if="{{length>5}}"></view>
    字符串运算： <view>{{"Hello" + name}}</view>
    数据路径运算： <view>{{object.key}}{{array[0]}}</view>
• 条件渲染 wx:if="{{condition}}" (不可以嵌套 view， 想嵌套用 block)
  wx:elif 和 wx:else
  Demo: 当 length 大于 5 页面渲染值为 1, 当length 大于2 页面渲染值为 2， 其他情况页面显示 3
  <view wx:if="{{length > 5}}">1</view>
  <view wx:elif="{{length > 2}}">2</view>
  <view wx:else>3</view>
  
  Demo: 块级渲染 ： 渲染多个 view
  <block wx:if="{{condition}"> //block 不会渲染页面， 它只接受一个控制属性，只是一个容器
  <view>1</view>
  <view>2</view>
  </block>
• wx：for // 列表渲染
  .wxml 文件
  <view wx:for="{{array}}">
  {{index}}:{{item.message}}
  </view>
  
  .js 文件
  Page({
  data:{
  array:[{
  message:'first',
  },{
  message:'second',
  }]
  }
  })
  
  
  wx:for-item 和 wx:for-index wx:for 是可以 view 嵌套的
  Demo : 9*9 乘法表
  <view wx:for="{{1,2,3,4,5,6,7,8,9}}" wx:for-itm="i">
  <view wx:for="{{1,2,3,4,5,6,7,8,9}}" wx:for-itm="j">
  <view wx:if="{{i <=j}}"> {{i}} *{{j}}={{i*j}} </view>
  </view>
  </view>
• <template> //模板
  定义模板 <template name="templateName">
  <view>
  <text>{{index}}:{{item.msg}}</text>
  <text>Time : {{item.time}}</text>
  <text>Name : {{item.name}}</text>
  </view>
  </template>
  
  使用模板
  <template is="templateName" data="{{...item}}" />
  
  .js 文件
  Page({
  data:{
  item:[{
  msg:'first',
  time:'2019-02-14',
  name:'Tracy'
  },{
  msg:'second',
  time:'2019-02-14',
  name:'Tracy1'
  }]
  }
  })
• 事件 事件名="方法名"
  <view bindtap="viewtap">
  事件名：以 bind 或者 catch 开头 + 事件类型 (such as : bindtap, catchtouchstart)
  方法名： 对应的是 Js Page 中定义的同名函数
  Tips: bind 不会阻止冒泡事件向上冒泡， catch 会阻止冒泡事件向上冒泡
  WXML 有如下6个冒泡事件， 其余都是非冒泡事件 ：
  touchstart : 手指触摸动作开始
  touchmove : 手指触摸后移动
  touchcancel: 手指触摸动作被打断， 如来电提醒， 弹窗等
  touchend : 手指触摸动作结束
  tap: 手指触摸后马上离开
  longtap: 手指触摸后， 超过350ms再离开
• 引用

  import 被引用的文件定义了模板代码, 作用域仅限于当前引用 (即 a 引用了 B, B 引用了 c. 此时 a 不能直接引用 c 里的 template) item.wxml 文件 <template name="item"> <view>{{text}}</view> </template> index.wxml 文件 <import src="item.wxml" /> <template is="item" data="{{text:'forbar'}}" />

  include 引入除了模块外的其他全部代码 header.wxml <view>header</view> footer.wxml <view>footer</view> index.wxml 文件 <include src="header.wxml" /> <view>body</view> <include src="footer.wxml" />

js 文件

• App() 函数 -- app.js 全局js 文件
  • 这三个函数都不是必须的
  • onlauch : 小程序初始化后， 则会触发且只会触发一次
  • onShow : 小程序启动， 或是从后台进入前台则被触发
  • onHide: 小程序从前台切换到后台则被触发
• Page 函数 -- 页面 JS 文件
  • 初始化数据 -- data： 属性
  • 生命周期函数
    onLoad : 页面加载完
    onShow : 页面显示时
    onReady: 页面初次渲染完成时
    onHide : 页面隐藏时
    onUnload : 页面卸载时
    onPullDownRefresh: 下拉刷新时
  • 事件处理函数
  • setData : 可以多次调用该方法来更改数据. this.setData 中的 this 代表这个页面
    之前没有出现过的数据， 也可以在这里直接使用， 不用需要在 data 里先定义好才能使用

WXSS 样式文件

• 新的尺寸单位 rpx, 所有手机的屏幕宽度为 750rpx，它会根据屏幕宽度进行自适应
• 样式导入： 可以写 style 也可以写css
  @import"/common/common.wxss" 引用另一个文件定义的样式

小程序组件

• 共同属性 data-* : Any 类型属性, 当组件触发时间时，将该属性发送给时间处理函数
• 共同属性 band*/catch* : 事件也是组件的一种属性， EventHandler类型属性， 绑定该组件相关的事件处理函数
• 微信搜索 ： 小程序示例， 这个小程序展示了目前小程序支持的组件

• import "../../app.wxss";
• .container { height: 100%; }
• full-width : 750rpx;
• layout-2-1

  /*common css for page layout*/
  page {
    background: #eee;
  }
  
  image {
    width: 100%;
    /*mode="widthFix" 高度自适应*/
  }
  
  .qingti-column {
    width: 750rpx; /*1rpx=window.innerWidth/75*/
    clear: both;
  }
  
  .qingti-column [class*=qingti-col-] {
    margin-bottom: 15rpx;
  }
  
  .qingti-column .qingti-col-1-1 {
    width: 710rpx;
    padding: 0rpx 20rpx;
  }
  
  .qingti-column .qingti-col-2-1 {
    width: 350rpx;
    padding: 0rpx;
  }
  
  .qingti-column .qingti-col-2-1:nth-child(odd) {
    padding-left: 20rpx;
    padding-right: 5rpx;
    float: left;
  }
  
  .qingti-column .qingti-col-2-1:nth-child(even) {
    padding-right: 20rpx;
    padding-left: 5rpx;
    float: right;
  }
  
  .qingti-column [class*=qingti-col-] {
    padding: 0rpx 20rpx;
  }