小程序开发

GoodKat
87 阅读3分钟

1、小程序的宿主环境

1.1小程序启动过程

a1.PNG

1.2页面渲染过程

2.PNG

1.3.小程序API3大分类

6.PNG

2、组件

2.1、 分类

3.PNG

2.2常用的试图容器类组件

4.PNG swiper组件常用属性：

5.PNG

eg：swiperheswiper-item

wxml文件
<swiper>

<swiper-item class="item">

<view class="A">A</view>

</swiper-item>

<swiper-item  class="item">

<view class="B">B</view>

</swiper-item>

<swiper-item  class="item"> 

<view class="C">C</view>

</swiper-item>

  


</swiper>
wxss文件
.item{

  height: 100%; 

  line-height: 150px;

  text-align: center;

}

.item .A{

  background-color: red;

}

.item .B{

  background-color: skyblue;

}

.item .C{

  background-color: yellow;

}

2.3常用的基础内容组件

2.PNG

eg：

<text selectable="">121221</text>
<rich-text nodes="<h1 style='color:red'>11</h1>"></rich-text>

2.4其他常用组件

2.4.1 button组件

4.PNG

<button type="primary">按钮</button>

<!-- 小尺寸 -->

<button type="warn" size="mini">警告</button>

<!-- 镂空按钮 -->

<button type="primary" plain>镂空</button>

2.4.2 image组件属性

5.PNG

<image src="../../img/ad-l.png" mode="aspectFill"></image>

3、WXML模板语法

3.1数据绑定

3.1.1内容绑定

wxml：
<view> {{hello}}</view>
js：
page里的data：
data: {

    hello:'hello word'

  },

3.1.2属性绑定

wxml：
<image src="{{img}}"></image>
js：
page里的data：
data: {

 img:'../../img/bg2.png'

  },

3.1.2 三元运算

wxml：
<view>{{Numbers>=5 ? '大于5':'小于5'}}</view>
js：
page里的data：
data:{
Numbers:Math.random()*10
}

3.2事件绑定

3.2.1常用事件

7.PNG

3.2.2事件对象的属性列表

8.PNG

3.2.3 target和currentTarget的区别

9.PNG

3.2.4 bindtap

10.PNG eg：

<button type="primary" bindtap="btnTap">按钮</button>
js：
Page({
btnTap(e){

  console.log(e)

},})

3.2.5 事件传参与数据同步

11.PNG eg：

<button type="primary"  bindtap="btnTap">加一 {{count}}</button>
js:
page({
data: {

    hello:'hello word',

    img:'../../img/bg2.png',

    Numbers:Math.random()*10,

    count:0,

  },

btnTap(e){

this.setData({

  count:this.data.count+1
})
},
)}

3.2.6事件传参

12.PNG

13.PNG

3.2.7 bindinput语法格式

14.PNG 每次输入一个数字都更新输出数据

eg:

<input bindinput="inputHandler" style="border:1px solid red" ></input>
js:
page({
inputHandler(e){

  console.log(e.detail.value)

},})

文本框和data之间的数据同步

eg：

wxml:
<input value="{{msg}}" bindinput="inputHandler" ></input>
js:
Page({
data:{
msg:'你好',
}
inputHandler(e){

  this.setData({

    msg:e.detail.value

  })

},
})

3.2.7条件渲染

15.PNG eg：

wxml:
<view wx:if="{{page===1}}">男</view>

<view wx:elif='{{page===2}}'>女</view>

<view wx:else>保密</view>
js:
page({

data:{
page:0
}

})

结合使用wx:if

16.PNG

eg:

不显示多余的标签----block不显示

    <block wx:if="{true}">

<view>1</view>

<view>2</view>

</block>

显示隐藏

17.PNG

18.PNG

3.2.8列表渲染

20.PNG

21.PNG

22.PNG

4.WXSS模板样式

23.PNG

4.1rpx

24.PNG

4.2样式导入

25.PNG

4.3全局配置

26.PNG

4.3.1window

27.PNG

4.3.2tabBar

28.PNG

29.PNG

30.PNG

31.PNG

4.4页面配置

2.PNG eg：

3.PNG

4.PNG

5.网络数据请求

5.PNG

6.PNG

5.1get请求

7.PNG

    wxml：
    <button bindtap="getinfo">get请求</button>
    js:
    Page:({
    getinfo(){

    wx.request({

      url: 'https://www.escook.cn/api/get',

      method:'get',

      data:{

        name:'zs',

        age:20

      },

      success:(res)=>{

        console.log(res.data)

      }

    })

  },})

5.2发起post请求

8.PNG eg：

    <button bindtap="postinfo">post请求</button>
    js:
    page:({
    postinfo(){

wx.request({

  url: 'https://www.escook.cn/api/post',

  method:'post',

  data:{

    name:"zs",

    age:23

  },

  success:(res)=>{

    console.log(res.data)

  }

})

  },})

5.3 页面加载时请求数据

生命周期中发起监听页面函数

9.PNG

5.4跳过request合法域名效验

10.PNG

5.5 跨域和axios的说明

11.PNG

6.视图与逻辑

6.1页面导航

2.PNG

6.1.1 声明式导航

3.PNG

4.PNG

5.PNG

6.1.2 编程式导航

6.PNG eg：

    <button type="primary" bindtap="news">跳转消息</button>
   js:
    news(){

  wx.switchTab({

    url: '/pages/news/news',

  })

},

7.PNG eg:

    wxml:
    <button type="primary" bindtap="info">跳转info</button>
    js:
    info(){

  wx.navigateTo({

    url: '/pages/info/info',

  })

},

8.PNG eg:

    <button type="primary" bindtap="tohome">上一层</button>
    js:
    tohome(){

    wx.navigateBack({

      

    })

  },

6.1.3 导航传参

9.PNG

10.PNG

11.PNG

6.2 页面事件

6.2.1 下拉刷新

12.PNG

13.PNG

114.PNG

15.PNG

16.PNG

6.2.2 上拉触底

17.PNG

18.PNG

6.3 生命周期

19.PNG

20.PNG

21.PNG

6.3.1 应用生命周期函数

22.PNG

6.3.2 页面生命周期

23.PNG

6.4WXS脚本

24.PNG eg：

    <view>{{m1.toUpper(cont)}}</view>

<wxs module="m1">

  module.exports.toUpper= function(str){

  return str.toUpperCase()

}

</wxs>
    
 js：
 data: {

cont:'zs',

  },

25.PNG

26.PNG

7.基础加强

7.1自定义组件

1.PNG

2.PNG

3.PNG

4.PNG

5.PNG

6.PNG

7.PNG

7.1.1 自定义组件-数据，方法，属性

data和methods使用和vue一样

8.PNG

9.PNG

properties属性 和vue中自定义属性一模一样

10.PNG

11.PNG

12.PNG

7.1.2数据监听器

13.PNG

14.PNG

7.1.3 纯数据字段

15.PNG

16.PNG

7.1.4 组件生命周期

17.PNG

18.PNG

19.PNG

7.1.5组件所在页面的生命周期

20.PNG

21.PNG

7.1.6 插槽

22.PNG

23.PNG

24.PNG

25.PNG

26.PNG

7.1.7父子组件之间的通信

27.PNG 属性绑定 28.PNG

29.PNG 事件绑定

30.PNG eg：

31.PNG

32.PNG

33.PNG

34.PNG

获取组件实例 35.PNG behaviors

36.PNG

37.PNG

38.PNG

7.2使用npm包

2.PNG

3.PNG

4.PNG

7.3全局数据共享

5.PNG

6.PNG

eg1：在store中创创建实例

    
    // 在这个 JS 文件中，专门来创建 Store 的实例对象
    定义数据，计算属性，通过action修改store里的值

import { observable, action } from 'mobx-miniprogram'

  


export const store = observable({

  // 数据字段

  numA: 1,

  numB: 2,

  activeTabBarIndex: 0,

  // 计算属性

  get sum() {

    return this.numA + this.numB

  },

  // actions 函数，专门来修改 store 中数据的值

  updateNum1: action(function (step) {

    this.numA += step

  }),

  updateNum2: action(function (step) {

    this.numB += step

  }),

  updateActiveTabBarIndex: action(function(index) {

    this.activeTabBarIndex = index

  })

})

eg2:将Store中的成员绑定到页面中

    <view>{{numA}} + {{numB}} = {{sum}}</view>

<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA + 1</van-button>

<van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">numA - 1</van-button>
    在页面的js文件引入
    import { createStoreBindings } from 'mobx-miniprogram-bindings'

import { store } from '../../store/store'
   Page({
    /**

   * 生命周期函数--监听页面加载

   */
    onLoad: function (options) {

    this.storeBindings = createStoreBindings(this, {

      store,

      fields: ['numA', 'numB', 'sum'],

      actions: ['updateNum1']

    })

  },
    /**

   * 生命周期函数--监听页面卸载

   */
    onUnload: function () {

    this.storeBindings.detroyStoreBindings()

  },
    })
    
 在页面上使用store成员
  绑定触发函数
    btnHandler1(e) {
    调用e.target.dataset方法

    this.updateNum1(e.target.dataset.step)

  },

eg3：将store中的成员绑定到组件中

8.PNG

代码：

    wxml：
    <!--components/numbers/numbers.wxml-->

<view>{{numA}} + {{numB}} = {{sum}}</view>

<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB + 1</van-button>

<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB - 1</van-button>
  
    
    js：
    // components/numbers/numbers.js

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'

import { store } from '../../store/store'

  


Component({

  behaviors: [storeBindingsBehavior],

  storeBindings: {

    // 数据源

    store,

    fields: {

      numA: 'numA',

      numB: 'numB',

      sum: 'sum'

    },

    actions: {

      updateNum2: 'updateNum2'

    }

  },

  /**

   * 组件的属性列表

   */

  properties: {

  


  },

  


  /**

   * 组件的初始数据

   */

  data: {

  


  },

  


  /**

   * 组件的方法列表

   */

  methods: {

    btnHandler2(e) {

      this.updateNum2(e.target.dataset.step)

    }

  }

})

7.4分包

9.PNG

10.PNG

11.PNG

12.PNG

7.4.1配置方法

13.PNG

14.PNG

15.PNG

7.4.2独立分包

16.PNG

17.PNG

18.PNG

20.PNG

eg：在分包时候添加independent后就是独立分包

19.PNG

7.4.3 分包预下载

20.PNG

21.PNG

22.PNG

avatar
文章
阅读
粉丝