微信小程序开发（BlackHorse）

目录

一.小程序基础部分

0.全局配置

1.标签

2.input相关

3.样式wxss相关

4.轮播图 swiper

5.navigator 导航组件 类似超链接

6.rich-text 富文本标签

7.button

8.小程序字体图标icon

9.单选框/复选框

10.自定义组件

11.插槽slot

12.小程序生命周期

二.小程序项目开发

---

一.小程序基础部分

0.全局配置

"window":{
    "backgroundTextStyle":"dark",    //下拉刷新背景颜色
    "navigationBarBackgroundColor": "#eb4450",    //顶部导航颜色
    "navigationBarTitleText": "购物街",    //顶部导航名
    "navigationBarTextStyle":"white",    //导航名颜色
     "enablePullDownRefresh": true    //实现下拉刷新
  },

"tabBar": {
    "color": "#999",    //table标签未选中文字颜色
    "selectedColor": "#ff2d4a",    //选中颜色
    "backgroundColor": "#fafafa",    //背景颜色
    "position": "bottom",    
    "borderStyle": "black",    
    }

1.标签

1.text相当于span标签            

文本

：selectable属性长按可复制内容;

decode可以解码： -->解析为空格     

2.view相当于div标签

3.checkbox就是checkbox

2.input相关

1. 绑定事件关键字 bindinput 

2.获取输入框的值 通过事件源对象获取：e.detail.value

3.输入框的值赋值给data中的num： 

   this.setData({num:e.detail.value})

4.加入一个点击事件：

①.bindtap  

②.无法在小程序当中的事件中直接传参

③通过自定义属性的方式来传递参数

④事件源中获取 自定义属性 data-自定义名=“{ {数}}”

+
-

取‘数’：e.currentTarget.dataset.xxx; 

 handletap(e){
        console.log(e);
        // 获取自定义属性 operation
        const operation=e.currentTarget.dataset.xxx;
        this.setData({
            num:this.data.num+operation
        })
    }

3.样式wxss相关

1.小程序中，不需要主动引入样式

注：小程序当中，不支持通配符*

/* 主题颜色 
    less,css,wxss都支持变量声明
*/
page{
    --themeColor:#eb4450;
}

通过以下方式使用样式

view{
    color:var(--themeColor);
}

2.需要把页面中某些元素的单位由px改为rpx

1 设计稿  750px

750px=750rpx

2.把屏幕宽度改为 375px

     375px=750rpx

     1px=2rpx

     1rpx=0.5px

3.存在一个设计稿宽度414或者未知page

    1.设计稿page存在一个元素

       宽度100px

    2.拿以上的需求去实现不同宽度的页面适配

       page px=750px

       1px = 750rpx/page

       100px = 750rpx*100/page

4.利用一个属性calc css和wxss都支持一个属性

注：数字和单位不要要有空格 运算符两边也不要有空格

引入的代码是通过@import，路径只能是相对路径

3.图片image

1.image组件默认宽高320px 240px

2.mode 决定图片内容如何和图片标签宽高做适配

scaleToFill 不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满image 元素

aspectFit  保持纵横⽐缩放图⽚，使图⽚的⻓边能完全显⽰出来。常用于页面轮播图

aspectFill  保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。少用

widthFix   宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变

top  不缩放图⽚，只显⽰图⽚的顶部区域。 ...其他三个也是

3.小程序中的图片，直接就支持懒加载  lazy-load

lazy-load  会自己判断，当图片出现在视口、上下三屏的高度之内的时候，自己开始懒加载

4.轮播图 swiper

容器标签 swiper

每一个轮播项 swiper-item        

swiper存在默认样式：width 100%,height 150px  image 320px*240px

swiper高度无法实现由内容撑开  先找原图高度和宽度，等比例 给swiper定高宽

原图（520*280）px

swiper 宽/swiper高=原图 宽/原图 高==>swiper高=swiper 宽*原图 高/原图 宽

即：height:100vh*280/520

swiper{
    width: 100%;
    height: calc(100vh*280/520);
}
image{
    width: 100%;
}

       swiper的一些API

        autoplay 自动轮播   

        interval 修改轮播时间(ms)

        circular 衔接轮播  

        indicator-dots 显示指示器小点点  indicator-color=‘’  小点点颜色

        indicator-active-color=‘’ 当前选中的小点点颜色

5.navigator 导航组件 类似超链接

navigator 块级元素

url ：跳转的页面路径

target：要跳转当前的小程序，还是其他小程序页面

self 默认值--自己

miniProgram --其他小程序的页面

open-type:跳转方式

navigate：保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到tabbar ⻚⾯

redirect：关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到tabbar ⻚⾯。

switchTab：跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯

reLaunch：关闭所有⻚⾯，打开到应⽤内的某个⻚⾯ (随便跳)

navigateBack：关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当 前的⻚⾯栈，决定需要返回⼏层

exit：exit 退出⼩程序，target=“miniProgram”时生效

6.rich-text 富文本标签

nodes属性来实现

1.接收标签字符串 2.接收对象数组

data: {
        // 标签字符串
        // html:`
价格区间
-
`
  // 对象数组
 html:[
   {
    // 1.div标签  name指定
   name:'div',
    // 2.标签上有哪些属性
   attrs:{
   class:'my_div',
   style:'color:red;'
  },
    // 3.子节点children 要接收的数据类型和nodes第二种渲染方式的数据类型一致
   children:[
  {
     name:'p',
     attrs:{},
    // 放文本
     children:[{
     type:'text',
     text:'hello'
     }]
    }
   ]
  }
 ]
},

7.button

1.外观的属性

  1 size 控制按钮大小

   default 默认大小   mini 小尺寸

   2 type 控制按钮的颜色

  default 灰色   primary绿色  warn红色

  3.plain 按钮是否镂空，背景色透明

  4.loading 名称前是否带 loading 图标

2.open-type 开发能力

contact
share
getPhoneNumber
getUserInfo
launchApp
openSetting
feedback

contact：打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从 bindcontact 回调中获得具体信息

share：转发当前的小程序到微信朋友中，不能分享到朋友圈

getPhoneNumber:获取⽤⼾⼿机号，结合一个事件使用，非企业级小程序账号，没有权限

1. bindgetphonenumber

2.在事件的回调函数中，通过参数获取信息

 // 获取用户手机号码(在e这个对象里面)
    getPhoneNumber(e){
        console.log(e);
    }

3.获取到的信息 已经加密了，需要用户自己搭建小程序后台服务器进行解析手机号码，返回到小程序中，就可以看到信息了。

getUserInfo:获取⽤⼾信息

  1.使用方法：类似 获取用户手机号码

  2.可以直接获取，不存在加密

launchApp:在小程序当中，直接打开app

  1.需要在app中 通过app的某个连接打开小程序

  2.在小程序中，再通过这个功能重新打开app

  3.找到京东app和京东的小程序

openSetting：打开小程序内置的授权页面

  1.授权页面中，只会出现用户曾经点击过的权限

feedback：打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志

  1.只能够通过真机调试来打开

8.小程序字体图标icon

        1.type 图标类型

          success|success_no_circle|info|warn|waiting|cancel|download|search|clear

        2.size大小

        3.color颜色

9.单选框/复选框

       1. radio标签必须和父元素 radio-group来使用  

        2.value 选中的单选框的值

        3.需要给 radio-group绑定change事件

单选框

    男
    女      


 您选中的是:{
    {gender}}

data: {
        gender:'',       
    },
    handleChange(e){
        // 1.获取单选框的值
        let gender = e.detail.value;
        // 2.把值赋值给data中
        this.setData({
            // gender:gender
            gender
        }) 
    }

复选框

    
        
            {
    {item.name}}
        
          
    
      
          选中的水果：{
    {checkedList}}
              

data: {
        list:[
            {id:'001',name:'苹果',value:'apple'},
            {id:'002',name:'香蕉',value:'banana'},
            {id:'003',name:'橘子',value:'orange'},
        ],
        checkedList:[]
    },
    handleItemChange(e){
         // 获取被选中的复选框值,进行赋值
        this.setData({
            checkedList:e.detail.val
        })
    }

10.自定义组件

父->子 通信

父组件传递数据  .wxml

子组件接收数据  .js

properties: {
        // 里面存放的是接收的数据
        aa:{
            type:String,
            value:''
        },
        tabs:{
            type:Array,
            value:[]
        }
    },

子组件应用数据

{
    {aa}}

导航栏点击颜色切换

        
            {
    {item.name}}
                  
    

   // 组件的方法列表
    methods: {
        // 1绑定点击事件
        handleTap(e){
        // 2获取被点击的索引
            const {index}=e.currentTarget.dataset;
        // 3获取原数组
        /*
         解构{},对复杂类型进行解构的时候，复制了一份 变量的引用而已
         最严谨的做法，重新拷贝一份数组，在对这个数组的备份进行处理，
         不要直接修改this.data.数据
        */ 
            let {tabs}=this.data;
            // let tabs=this.data.tabs   这两种写法一样
        // 4对数组循环
        // [].forEach 遍历数组的时候 修改了v 也会导致原数组被修改
        tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)

            this.setData({
                tabs
            })
        }
    }

 子->父 通信

子组件传递数据

点击事件触发的时候，触发父组件中的自定义事件，同时传递数据给父组件
// this.triggerEvent("父组件自定义事件的名称",要传递的参数)
this.triggerEvent("itemChange",{index});

父组件接收数据

// 自定义事件 用来接收子组件传递的数据
    handleItemChange(e){
        const {index}=e.detail
        console.log(index);
    }

当然 ，导航栏切换的数据也可以一同传递给父组件

// 自定义事件 用来接收子组件传递的数据
    handleItemChange(e){
        const {index}=e.detail
        console.log(index);
        let {tabs}=this.data;
        tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
        this.setData({
            tabs
        })
    }

11.插槽slot

slot标签 插槽

等到父组件调用子组件的时候再传递过来 slot标签最终会被传递的标签所替换

12.小程序生命周期

应用生命周期

// app.js
App({
  // 1.应用第一次启动就会触发的事件
  onLaunch(){
  // 在应用第一次启动的时候可以获取用户的个人信息 
    console.log('onLaunch');

    // js跳转页面,这种不能触发onPageNotFound事件
    wx.navigateTo({
      url: '11/22/33',
    });
      
  },
  // 2.应用被用户看到时候就触发
  onShow(){
  //经常被看到,经常切换页面
  // 可以对应用的数据或者页面效果进行重置
    console.log('onShow');
  },
  // 3.应用被隐藏所触发
  onHide(){
    // 暂停或清除定时器
    console.log('onHide');
  },
  // 4.应用的代码发生了报错的时候，就会被触发
  onError(err){
  //可以手机用户的错误信息，收集用户错误信息，通过异步请求，将错误发送后台
    console.log('出错了');
    // console.log(err);
  },
  // 5.页面找不到就会触发
  // 应用第一次启动的时候，如果找不到第一个入口页面，才会触发
  onPageNotFound(){
    // 如果页面找不到，通过js重新跳转页面  重新调到第二个页面
    // 不能跳转到tabBar
    console.log('onPageNotFound');
    wx.navigateTo({
      url: 'pages/demo16/demo16',
    });
  }
})

页面的生命周期

/**
     * 生命周期函数--监听页面加载
     * 发送异步请求，初始化页面数据
     */
    onLoad: function (options) {
        console.log('onLoad');
    },
    /**
     * 生命周期函数--监听页面显示
     */
     onShow: function () {
        console.log('onShow');
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        console.log('onReady');    
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
        console.log('onHide');
    },
    /**
     * 生命周期函数--监听页面卸载
     * 也可以通过超链接跳转其他页面触发，也就是关闭当前页面
     */
    onUnload: function () {
        console.log("onUnload");
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     * 进行页面数据或者界面效果刷新
     */
    onPullDownRefresh: function () {
        console.log('页面下拉刷新了');
    },
    /**
     * 页面上拉触底事件的处理函数
     * 需要让页面出现上下滚动才行
     */
    onReachBottom: function () {
        console.log('页面上拉刷新了');
    // 实现上拉加载下一页数据
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        console.log('分享');
    },
    // 页面滚动就触发
    onPageScroll(){
        console.log('滚了');
    } ,
    /**
     * 页面发生改变会触发
     * 小程序 发生横竖屏切换触发
     */
    onResize(){
        console.log('屏幕切换了');
    },
    /**
     * 当前页面是tabBar页面，
     * 点击自己的tab item 的时候才会触发
     */
    onTabItemTap(){
        console.log(onTabItemTap);
    }

注意：onResize的实现需要在json文档里配置

{
  "pageOrientation": "auto"
}

二.小程序项目开发

        项目来自黑马优购，https://github.com/xiaosa93/Shopping