微信小程序基础知识

2019-04-12  本文已影响0人  雪映月圆

一. .wxml 文件中的基本语法

<!-- view:  相当于div -->
<!-- text:  相当于span -->

<view>
  <!-- 1.插入data中的自定义数据  -->
  <text> {{ msg }} </text>

  <!-- 2.属性的动态值 -->
  <text title="{{ msg }}"></text>

  <!-- 3.能够解析标签的插入方式 -->
  <rich-text nodes=" {{ msg }}"></rich-text>

  <!-- 4.条件语句wx:if -->
  <text wx:if="{{ flag === 1 }}">flag为1时显示</text>
  <text wx:elif="{{ flag === 2 }}">flag为2时显示</text>
  <text wx:else>flag不是以上两种情况时显示</text>

  <!-- 5.循环语句 wx:for -->
  <!-- 使用循环时,默认 item 代表数组中的每一个元素,index表示元素的索引 -->
  <!-- 如果觉得item不够语义化,可以使用 wx:for-item="别名" wx:for-index="别名" 来指定别名 -->
  <!-- 注意: 指定别名后,item和index将不能再使用 -->
  <!--   记得要加key值 -->
  <view>
    <!-- 默认写法 -->
    <text wx:for="{{ lists }}" wx:key="{{ }}">
      {{ item }}, {{ index }}
    </text>

    <!-- 指定别名写法 -->
    <text
      wx:for="{{ lists }}"
      wx:for-item="list"
      wx:for-index="ind"
      wx:key="{{ }}"
    >
      {{ list }}, {{ ind }}
    </text>
  </view>

  <!-- 6.绑定事件 -->
  <!-- bindtap="handle",不传递参数写法 -->
  <button bindtap="handle">点击触发handle自定义方式</button>

  <!-- 传递参数写法 data-id="1": 表示传递id参数 -->
  <button bindtap="handle" data-id="1">点击触发handle自定义方式</button>
</view>

二. .js 文件中的常用属性

Page({

  // 自定义: handle处理函数(绑定的点击事件的处理函数)
  handle( ev ){
    // 获取传递的参数的值
    const id = ev.target.dataset.id;
  },

  /**
   * 页面的初始数据
   */
  data: {
    // 1. 自定义数据
    msg: "自定义的msg变量",
    scrollTop: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 2. 获取data中的数据
    const msg = this.data.msg;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 3. 需要在app.json中开启 window.enablePullDownRefresh 值为 true
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // 4. 当前页面滚动到底部时自动触发
  },

  // 5. 页面滚动时自动触发的函数
  onPageScroll: function(ev) {

    // 6. 修改data中的数据
    this.setData({
      scrollTop: ev.scrollTop
    });

    // 7. 设置滚动
    [wx.pageScrollTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.pageScrollTo.html)
  }

})

三、小程序的全局配置和页面局部配置

官方网址: 全局配置


// app.json中对小程序进行全局配置
{
  "pages":[
    "pages/index/index",
    "pages/profile/profile"
  ],
  "window":{
    "navigationBarBackgroundColor": "#FF6600",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle":"white",

    "backgroundColor": "#ccc",
    "backgroundTextStyle": "dark",

    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#ff6600",
    "list": [{
      "pagePath": "pages/indArticle/indArticle",
      "text": "首页",
      "iconPath": "imgs/index.png",
      "selectedIconPath": "imgs/index_active.png"
    },{
      "pagePath": "pages/profile/profile",
      "text": "我的",
      "iconPath": "imgs/concat.png",
      "selectedIconPath": "imgs/concat_active.png"
    }]
  }
}

四、页面跳转及携带参数

<!-- 1. 标签式导航 -->
网址: [navigator](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)
// 2. 编程式跳转
网址:[wx.navigateTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html)

// 示例:
wx.navigateTo({
  url: `/pages/article/article?id=1&a=2`,
})

// 跳转后,在页面中接收的方式
Page({
  onLoad (options) {
    // options就是 {id: 1, a: 2}
    const id = options.id
  }
})


// 注意: 不能跳转到tabBar对应的页面中,如果要跳转到tabBar,请使用
网址: [wx.switchTab](https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html)
wx.switchTab({
  url: '/index'
})

五、微信小程序父子通信和子父通信

自定义组件

// 假设页面index中需要引入article组件
// 1. 则在index.json中进行如下配置
{
  "usingComponents": {
      "article-detail": "/components/article/article"
  }
}
// 2. 然后在index.wxml中使用即可
<view>
  <article-detail></article-detail>
</view>

1. 向组件中传递值

<view>
  <article-detail msg="{{ msg }}"></article-detail>
</view>

// 然后在article.js中接收
properties: {
  msg:{
    type: String,
    value: ""
  }
}

2. 向父页面中传递值

// 首先在子组件中
this.triggerEvent("getArticleById", { id: id });

// 然后在父组件中
<view>
  <article-detail bindgetArticleById="handleGetArticle"></article-detail>
  // 或者
  <article-detail bind:getArticleById="handleGetArticle"></article-detail>
</view>

// 最后自定义处理函数接收参数
getArticleById(ev) {
  const id = ev.detail.id;
}
上一篇 下一篇

猜你喜欢

热点阅读