微信小程序开发(BlackHorse)

目录

一.小程序基础部分

1.标签

2.input相关

 3.样式wxss

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

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

3.图片image

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标签            

      <text selectable  decode>文本</text>

      :selectable属性长按可复制内容;decode可以解码:&nbsp-->解析为空格     

    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-自定义名=“{{数}}”

<button bindtap="handletap" data-xxx="{{1}}">+</button>
<button bindtap="handletap" data-xxx="{{-1}}">-</button>

取‘数’: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:`<div class="pc-search-filter J_pc-search-filter" data-spm="filter"><div class="bar-group clearfix order-bar clearfix" style="padding-left:20px;">价格区间</div><div class="bar-group clearfix price-bar J_price_bar"><span class="price-input" id="J_priceInput"><input id="J_min_price_input" value="" class="txt J_price_txt" placeholder="¥"><span style="margin: 0 2px;">-</span><input id="J_max_price_input" value="" class="txt J_price_txt" placeholder="¥"></span><span class="price-submit clearfix" id="J_priceSubmit"><input type="button" value="确定" class="price-btn J_price_submit_btn" index="4" data-spm="4"></span></div></div>`
        // 对象数组
        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 开发能力

<button open-type='contact'>contact</button>
<button open-type='share'>share</button>
<button open-type='getPhoneNumber'>getPhoneNumber</button>
<button open-type='getUserInfo'>getUserInfo</button>
<button open-type='launchApp'>launchApp</button>
<button open-type='openSetting'>openSetting</button>
<button open-type='feedback'>feedback</button>

        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事件

单选框

<radio-group bindchange="handleChange">
    <radio color='red' value="male">男</radio>
    <radio color='red' value="female">女</radio>      
</radio-group>

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

复选框

<view>
    <checkbox-group bindchange="handleItemChange">
        <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key='id'>
            {{item.name}}
        </checkbox>
          
    </checkbox-group>
      <view>
          选中的水果:{{checkedList}}
      </view>        
</view>
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

<Tabs aa='123'></Tabs>

        子组件接收数据  .js

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

        子组件应用数据

<view>{{aa}}</view>

导航栏点击颜色切换

<view class="tabs_title">
        <view 
        wx:for="{{tabs}}" 
        wx:key="id" 
        class="title_item {{item.isActive?'active':''}}"
        bindtap="handleTap"
        data-index="{{index}}">
            {{item.name}}
        </view>          
    </view>

   // 组件的方法列表
    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});

父组件接收数据

<!-- 子传父,通过事件的方式传递
    1在子组件的标签上加一个 自定义事件 -->
 <Tabs tabs='{{tabs}}' binditemChange="handleItemChange"></Tabs> 
// 自定义事件 用来接收子组件传递的数据
    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

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数&#xff1a; gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点&#xff1a; 完后运行&#xff0c;r gdb 中的有用命令 下面是一个有用的 gdb 命令子集&#xff0c;按可能需要的顺序大致列出。 第一列给出了命令&#xff0c;可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布&#xff1a; 一元高斯分布&#xff1a;(将多元高斯分布中的D取值1&#xff09; 其中代表的是平均值&#xff0c;是方差的平方&#xff0c;也可以用来表示&#xff0c;是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要&#xff0c;需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容&#xff0c;经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch &#xff0c;简称ES 。是一个全文搜索服务器&#xff0c;也可以作为NoSQL 数据库&#xff0c;存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项&#xff1a; (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候&#xff0c;访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议&#xff1a;以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么&#xff1f; 在java规范中是这样描述的&#xff1a;Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联&#xff0c;线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口&#xff0c;远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能&#xff0c;出了大概一年了。 程序员们在编程时遇到不会的问题&#xff0c;又没有老师可以提问&#xff0c;就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法&#xff0c;但是不一定得到回复&#xff0c;…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎&#xff0c;题目很狗&#xff0c;第一次踩这个坑&#xff0c;单拉出来写个题解记录一下 题意&#xff1a;给一个数字矩阵&#xff0c;一次操作&#xff1a;对于每一行&#xff0c;可以去掉左端或者右端的数&#xff0c;得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1&#xff09;全特化2&#xff09;偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类&#xff1a; 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…