微信小程序 js xmss json 使用

app.js

App({
  onLaunch (options) {
    // Do something initial when launch.
    监听小程序初始化。
  },
  onShow (options) {
      //options 监听通过什么方式进入 获取场景值
    // Do something when show.
    监听小程序启动或切前台。（微信切进前台）
  },
  onHide () {
    // Do something when hide.
    监听小程序切后台。（进入后台）
    //把零时数据存储起来
  },
  onError (msg) {
     // 错误监听函数。
    console.log(msg)
  },
  onPageNotFound(){
      页面不存在监听函数。
  }
  
  //开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问
  globalData: 'I am global data'
  setnewfn(){
      consoel.log('任意函数')
  }
})

app.json 进行全局配置

界面风格的设置：

属性	类型	必填	描述	最低版本
pages	string[]	是	页面路径列表

pages 配置项数组里写页面入径小程序可以找到页面

第一个数组的值，代表的小程序进入时，最先显示的页面。

window 配置项（缺点只能用默认的导航条）

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

1.用于自定义导航栏 (满足于设计师的需求)

navigationStyle :custom

2.下拉加载更多

onReachBottomDistance ：50 下拉加载更多

当创建一个pages/home/home 页面时，下拉页面会触发一个page.js 里的生命周期函数

onReachBottom : function(){

//用来加载数据

}

3.屏幕旋转设置

pageOrientation ： auto/ portrait / landscape 详见响应显示区域变化

portrait 人像模式竖屏

landscape 风景模式横屏

手机以什么方式显示

等等配置

tabBar 配置项

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

{
  "pages": [//配置页面路径
    "pages/movie/movie",
    "pages/cinema/cinema",
    "pages/mine/mine"
  ],
  "window": {//用于设置小程序的状态栏、导航条、标题、窗口背景色
    "navigationBarBackgroundColor": "#e54847",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "猫眼",
    "backgroundColor": "#E8E8E8",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50,
    "pageOrientation": "auto"
  },
  "tabBar": {//配值tab
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/movie/movie",
        "text": "电影",
        "iconPath":"/images/2153438.jpg",
        "selectedIconPath":"/images/2153400.jpg"
      },
      {
        "pagePath": "pages/cinema/cinema",
        "text": "影院",
        "iconPath": "/images/1906157.jpg",
        "selectedIconPath": "/images/1902757.jpg"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/images/685380.jpg",
        "selectedIconPath": "/images/685255.jpg"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

注意：图片格式要png格式，引入图片不能写绝对路径

app.wxss 全局样式的设置

如果在pages/home/home 自己的wxss的文件设置样式，会覆盖全局样式

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

微信适配的问题

设计师设计出宽750px 的设计图这样我们前端可以不用进行换算直接使用750rpx

显示在手机图像和设计图的图像相同。

pages 下面的页面

js文件

生命周期函数

Page({
  /**
   * 页面的初始数据,给xml为文件使用{{}}
   */
   //改数据data 方法 this.setData({}})
  data: {
      
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作（下拉刷新）
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数（上拉加载更多）
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
      return{//用于自定义转发内容
          title:'快来领红包了'
          path："/pages/home/home?id=110",//path用于转发我的小程序给好友，好友通过二维码，
          等,进入该路径的页面,通过添加参数就知道你是怎样进入页面的。做【派发红包的事情。
      }
  }
  onResize：function(){
      //页面旋转是触发
  }
  onTabItemTap：function(){
      //点击到tab栏   设置该生命函数的页面 会执行该函数
      主要的作用是：点击该页面 去浏览 然后再点击该页面会有触发返回top部
      点击tab  会播放某个声音
  }
})

posted @ 2019-08-06 02:28 不想飞的小鸟阅读(2464) 评论(0) 编辑收藏举报

刷新页面返回顶部

不想飞的小鸟

微信小程序 js xmss json 使用

公告