初学小程序

最新推荐文章于 2024-06-21 14:22:23 发布
最新推荐文章于 2024-06-21 14:22:23 发布
阅读量178 收藏 4
点赞数 1
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42411307/article/details/118730980
版权

2021.7.10

微信小程序初学

官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7

  • 首先注册账号 需要一个跟微信没有任何关系的邮箱

    image-20210709162842537

  • 下载小程序开发工具 并扫码登录 创建项目

    AppId可以在https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1375177217小程序后台开发者设置中查看

    image-20210709163044264

1. 小程序的结构目录

小程序框架(原生框架为`Mina`)的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

​ 小程序框架提供了自己的视图层描述语言 wxml和 wxss，以及Javascript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

对比:

结构传统web微信小程序
结构HTMLWXML
样式CSSWXSS
逻辑JavaScriptJavaScript
配置无JSON

通过对比可得,传统web是三层结构。而微信小程序,是四层结构, 多了一层配置.json

1.1 基本项目目录

image-20210709163803613

2. 小程序配置文件

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json和页面自己的page.json

配置文件中不能出现注释

2.1 全局配置app.json

image-20210709164553316

若需要新建页面, 可以手动在左边文件夹出右键新建然后在挨个创建其他文件 或者直接在app.json中的page里进行添加页面 保存后则会自动生成

该pages中的顺序为页面的展示顺序, 若想要首页为刚创建的Demo1则可以将demo1放在第一行

image-20210709165235993

在window中可以进行导航的基本配置信息

image-20210709170645139

  • enablePullDownRefresh 开启下拉刷新操作 默认为false
  • backgroundTextStyle 下拉刷新的图标的颜色 dark/light
  • backgroundColor 下拉刷新时的背景颜色
2.1.1 tabbar

image-20210709171515446

测试

image-20210709173442699

参数配置可以在官网查看api

image-20210709174353131

image-20210709174422336

2.2 页面配置 page.json

image-20210709175206955

在某页面中的json文件进行该页面的配置则会覆盖全局配置的属性信息

image-20210709175749980

2.3 sitemap 配置

小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信索引。

3. 模板语法

WXML (WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

3.1 数据绑定

image-20210713154348429

image-20210713154409717

image-20210713155521288

3.2 运算

image-20210713160758883

3.3 数组和对象的循环

image-20210713162703891

Block标签

  • 占位符的标签
  • 写代码的时候 可以看到这个标签的存在
  • 页面渲染后 小程序会把它移除掉

image-20210713163004799

image-20210713163057799

3.4 条件渲染

<view>
    <view wx:if="{{true}}">显示</view>
    <view wx:if="{{false}}">隐藏</view>
</view>

=========================================================
<view>
    <view wx:if="{{true}}">1</view>
    <view wx:elif="{{false}}">2</view>
    <view wx:else="{{true}}">3</view>
    <!-- 实现隐藏 -->
    <view hidden>hidden</view>
</view>

image-20210713171752033

image-20210713171809485

4. 事件绑定

小程序中绑定事件, 通过bind关键字来实现 如 bindtap bindinput bindchange 等

不同的组件支持不同的事件, 具体看组件的说明即可

wxml

<input bindinput="handleInput"/>

page

Page{
  //绑定的事件
    handleInput: function(e){
    	    
    }
}

测试

image-20210713172850954

image-20210713172931479

image-20210713172938629

image-20210713172949494

实现 按钮点击+1和-1

image-20210713174430947

  • 定义两个按钮 并绑定事件

    image-20210713174410608

  • 编写方法

    image-20210713174241335

5. 样式 WXSS

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。简单得说就是相对大小吧。

  1. 小程序中不需要主动引入样式文件。（即不需要link，只用在相关文件夹里创建好有关文件即可）
  2. 如果想在wxss或css中计算rpx得利用到calc属性：rpx（单位）的位置可以随便放，但要注意，周围不要有空格。
view{
  width:calc(750rpx*200/320);
  /* width:calc(750*200/320rpx);这样也可以 */
  height:200px;
  font-size:40px;
  background-color:red;
}

测试

image-20210713180111655

image-20210713180327402

wxss代码

view{
    /*width: 200rpx;*/
    height: 200rpx;
    font-size: 40rpx;
    background-color: aqua;
    width: calc(750rpx * 100/ 375);
}

wxml代码

<view>
    乌拉拉
</view>

image-20210713180621119

5.1 样式导入

wxss中直接就支持 样式的导入功能 也可以和 less中的导入混用

使用@import语句可以导入外联样式表,只支持相对路径

.small-p{
 	padding: 5px;   
}

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

测试

  • 创建style文件夹 并创建common.wxss

    image-20210713181418609

  • 编写代码

    image-20210713181435811

  • 在demo5页面中的wxss中引入使用

    image-20210713181511370

    image-20210713181525064

5.2 选择器

小程序不支持通配符*

//不支持 * 
*{
    margin:0;
    padding:0;
}

目前支持的选择器有:

image-20210714094849379

5.3 小程序中使用less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

  1. 例如在vscode中可以安装插件easy less

  2. 在vs code的设置中加入如下配置

    "less.compile": {
	"outExt": ".wxss"
}

  3. 在要编写样式的地方, 新建less文件, 如index.less然后正常编辑即可

6. 常见组件

如: view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox等

view

image-20210714100139183

代替原来的div标签

<view hover-class="h-class">
 	Click
</view>

text

  • 文本标签
  • 只能嵌套text
  • 长按文字可以复制
  • 可以对控制回车 进行编码

image-20210714100331313

image

  • 图片标签, image组件默认宽度320px、高度240px
  • 支持懒加载

image-20210714100833642

mode有效值

mode有13种模式, 其中4种是缩放模式, 9种是裁剪模式

image-20210714101547042

测试

image-20210714101512911

swiper

微信内置的轮播图组件

image-20210714104431990

image-20210714103818684

测试

  • 编写轮播图

    image-20210714104554773

  • 编写样式

    image-20210714104752073

navigator

导航组件 类似超链接标签

image-20210714105051305

image-20210714110655237

测试

image-20210714111159082

rich-text

**富文本标签: **可以将字符串解析成对应标签, 类似vue中的v-html功能

  • 在data中定义html标签文本

    image-20210714111653250

  • 页面使用rich-text标签image-20210714111729615

或者自定义data文本标签 不常用

image-20210714112155054

button

image-20210714112234578

测试

<button
   type="default"
   size="15px"
   loading="true"
   plain="true"
>
    Click
</button>

image-20210714112554893

open-type的合法值

image-20210714112646791

开放能力一

image-20210714133006539
image-20210714133256277

例如在使用getUserInfo时 需要在js中定义该方法获取回调值

image-20210714133546769

image-20210714133447560

image-20210714133520651

开放能力二

因为使用的是测试appid无法在真实的手机端显示 这时改为自己的appid进行测试

在后台添加客服微信

即可编译后扫码在手机上进行小程序的测试

icon

image-20210714134515361

image-20210714134654360

radio

可以通过color属性来修改颜色

需要搭配radio-group一起使用

image-20210714134833790

测试

image-20210714135048504

image-20210714135031226

checkbox

可以通过color属性来修改颜色

image-20210714135215347

image-20210714135659691

image-20210714135517237

image-20210714135628383

7. 自定义组件

类似于vue或者react中的自定义组件

7.1 创建自定义组件

类似于页面,一个自定义组件由json wxml wxss js 4个文件组成

可以在微信开发者工具中快速创建组件的文件结构

测试

image-20210714140401013

在tabs.json中可以看到自定义组件声明

{
  "component": true,   //证明是一个组件
  "usingComponents": {}
}

在某页面中引入该组件 在该页面的json文件中配置

image-20210714140910886

然后在页面引入即可

image-20210714141005907

7.2 自定义组件的样式优化

  • 在tabs组件编写样式

    image-20210714142326376

    image-20210714142353596

    image-20210714142409035

  • 由于以上是将内容写死的 不太友好

    1. 在tabs中的js文件中定义该四个标签

      image-20210714142627923

    2. 在页面循环遍历展示数组 并控制选中信息

      image-20210714142950027

7.3 标题的激活和选中

  • 首先在tabs.wxml中添加属性索引

    image-20210714144727144

  • 在tabs.js文件中编写方法

    /**
   * 1. 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下
   * 2. 组件.js 文件中 存放事件回调函数的时候 必须要存在methods方法中
   */
  methods: {
    hanldeItemTap(e){
      /*
        1. 绑定点击事件 需要在methods中绑定
        2. 获取被点击的索引
        3. 获取原数组
        4. 对数组循环
          1. 给每一个循环 选中属性 改为 false
          2. 给当前的索引的项 添加激活选中效果就可以了
       */
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 获取data中的数组
      // 对于复杂类型进行结构的时候  复制了一份 变量的引用而已
      // 最严谨的做法 是重新拷贝一份 数组 在对这个数组的备份进行处理
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      let {tabs} = this.data;
      // 循环数组
      //[].forEach 遍历数组 遍历数组的时候 修改了v 也会导致原数组被修改
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);

      this.setData({
        tabs
      })
    }
  }

    image-20210714144821057

7.4 父向子传递数据

  • 在父组件引用子组件的标签上添加传递的数据

    image-20210714145406535

  • 在子组件中的.js文件中进行参数的接收

    image-20210714145439060

  • 在子组件的页面上进行使用参数测试

    <view>{{aaa}}</view>

将之前的tabs移动至父组件 子组件进行接收(更加灵活)

  1. 将tabs.js中定义的tabs数组剪切至demo7.js(父组件)中

    image-20210714150050490

  2. 在demo7.wxml(父组件)中向子组件传递tabs数组

    <Tabs tabs="{{tabs}}"></Tabs>

  3. 在tabs.js中进行tabs数组的接收定义

    image-20210714150302972

7.5 子向父传递数据

由于以上写法 不够灵活改变数据无法将父组件中的tabs进行修改

而是数据变化时在子组件中进行改变

  • 在Tabs.js中添加点击事件并把数据传递给父组件

    image-20210714151924158

    triggerEvent是组件中的触发事件

  • 在demo7.wxml(父组件)中绑定点击事件

    image-20210714152035598

  • 在父组件的.js文件中 自定义该点击事件

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

    该方法与data同级

7.6 自定义组件插槽slot

在自定义组件Tabs中 之前所展示的是写死的内容

现在该为slot

  • image-20210714153541558

  • 在对应的父组件引用中进行数据的修改

    image-20210714153629107

  • 测试

    image-20210714153706376

    数据动态的显示

7.7 一些组件的补充属性

image-20210714154111249

8. 生命周期

分为 应用生命周期 和 页面生命周期

8.1 应用生命周期

image-20210714154546206

image-20210714160127391

8.2 页面生命周期

image-20210714160326532

image-20210714162129748
image-20210714162154565

Page生命周期整体流程图

阿灰丶
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
swiper插件使用
weixin_55743273的博客
12-21 3981
文章目录前言一、swiper的官网二、swiper的使用方法1.引入插件相关文件2.按照规定语法使用三、代码演示1.效果图demo2.代码演示3.效果图展示 前言 swiper是一款轻量级的轮播图插件,不仅支持pc端更是为移动端而生,用它可以快速地做出一个轮播图,或者扩展使其做出复杂的轮播效果。 一、swiper的官网 swiper的官网是 ：https://www.swiper.com.cn/ 二、swiper的使用方法 1.引入插件相关文件 首先进入官网首页，点击获取swiper进行选择下载需要的版本
微信小程序框架
ww112233j的博客
04-12 4570
随着前端的知识不断更新，小程序也成为了我们开发中的日常。微信小程序、百度小程序、支付宝小程序、头条小程序等等不断涌入我们的生活，随着小程序的火爆，各种小程序框架不断出现，也在不断更新。路漫漫，学不完呀！归根结底，都是一个目标，把小程序给制作出来，只是使用了不同的框架。那么目前有哪些框架/组件库比较优秀呢？我在这里简单的以下几款 1. uni-app uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/
前端swiper在html和vue项目中两种使用方法(带源码)
m0_49714202的博客
06-08 2062
前端swiper在html和vue项目中分别使用,有解析,带源码~
swiper使用教程
q1054007919的博客
03-31 1万+
第一步：点击获取swiper，点击下载Swiper，下载需要版本的swiper压缩包 第二部：在html页面使用，需要将下载文件里的css，min.css以及js,min.js放到自己的文件夹下 自己的文件 html的代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
初学JAVA 10道入门小程序
kingbin的博客
04-23 4836
1、编写程序实现对给定的 4 个整数从大到小的顺序排列。 package com.cn; import java.util.Scanner; public class JavaDemo01 { public static void main(String[] args) { // TODO Auto-generated method stub int a,b,c,d,t; ...
微信小程序开发初学：开关 - switch
Dae_Lzh的博客
01-28 2769
switch具有的属性 checked 类型：boolean 默认值：false 开关是否默认选中 disabled 类型：boolean 默认值：false 开关是否禁用 type 类型：String 默认值：switch type属性合法值： （1）switch：开关类型 （2）checkbox：勾选框类型 color 类型：String 默认值：#04BE02 switch 选中时的颜色，同 css 的 color 示例： <view> <switch></swi
微信小程序开发初学：输入框 - input
Dae_Lzh的博客
01-27 1万+
输入框。 input具有的属性 value 类型：String 默认值：无 输入框内的初始内容 type 类型：String 默认值：text 输入内容的类型 type属性的合法值 （1）text：输入文本 （2）number：输入数字（弹出数字键盘） （3）idcard：输入身份证（弹出身份证输入键盘） password 类型：boolean 默认值：false 是否为密码类型（输入内容显示为圆点） placeholder 类型：String 默认值：无 提示词 placeholder-class 类型：
微信小程序开发初学：按钮 - button
Dae_Lzh的博客
01-26 3665
按钮组件。 button具有的属性 type 类型：String 默认值：default 按钮的颜色样式 type属性的合法值 （1）default：默认样式 （2）primary：绿色 （3）warn：红色 size 类型：String 默认值：default 按钮尺寸 size属性和合法值 （1）default：默认尺寸 （2）mini：小尺寸 plain 类型：boolean 默认值：false 按钮是否镂空，背景色透明 disabled 类型：boolean 默认值：false 按钮是否禁用 loa
Python入门练手小程序
热门推荐
一个只会写bug的搬运工
06-06 2万+
Python小程序集锦程序1：数字组合程序2：猜数字程序3：猜时间程序4：判断整数大小 程序1：数字组合 问题描述： 有四个数字：1、2、3、4，能组成多少个互不相同且无重复数字的三位数？各是多少？ 问题分析： 可填在百位、十位、个位的数字都是1、2、3、4。组成所有的排列后再去掉不满足条件的排列。 for i in range(1,5): for j in range(1,5): for k in range(1,5): if i!=j and
微信小程序开发初学：图片组件 - image
Dae_Lzh的博客
01-23 4144
image组件用于在小程序中插入图片并对插入的图片进行简单修改。支持 JPG、PNG、SVG、WEBP、GIF 等格式。 image具有的属性 src 类型：String 默认值：无 图片的网络地址或本地文件目录 mode 类型：String 默认值：scaleToFill 图片裁剪，缩放的模式 mode属性合法值 （1）scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 （通常图片会形变，不美观） （2）aspectFit 缩放模式，保持纵横比缩放图片，使
JAVA初学小程序
09-19
我们使用了两个命令 javac 和 java。 javac 后面跟着的是java文件的文件名，例如 HelloWorld.java。 该命令用于将 java 源文件编译为 class 字节码文件，如： javac HelloWorld.java。 运行javac命令后，如果成功...
初学者小程序
09-02
3到100以内的素数求法 10个数中找最大数 100以内的数字相加
微信小程序的初学小案例婚礼邀请函
04-02
微信小程序的初学小案例婚礼邀请函
微信小程序初学者实战项目-购物商城
04-09
主要功能的一个实现 一、商城主界面 1、每日爆品滑动效果 2、轮播图 3、数据刷新 ...二、分类 分为左右两个盒子，一二级菜单 ...这个只是本人初学小程序写的比较浅显简单，如有不恰当的地方，望各位海涵。
1964springboot VUE小程序在线学习管理系统开发mysql数据库uniapp开发java编程计算机网页源码maven项目
qq_251836457的博客
06-21 1159
springboot VUE uniapp 小程序 在线学习管理系统是一套完善的完整信息管理类型系统，结合springboot框架uniapp和VUE完成本系统，对理解vue java编程开发语言有帮助系统采用springboot框架（MVC模式开发），系统具有完整的源代码和数据库，系统主要采用B/S模式开发。需要源码 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者。6.是Maven项目；(1)管理员管理：对管理员信息进行添加、删除、修改和查看。
若依框架,小程序访问后端,后端访问客户端,客户端读取图片返回
threadroc的专栏
06-17 429
这个示例代码展示了如何在服务端调用客户端读取本地图片并返回给前端的基本流程。如果需要处理更多的业务逻辑或错误情况，可以进一步完善代码。的前缀路径，以适应你的图片存储路径。：根据你的实际情况修改。
低成本创业新篇章：上门回收小程序的崛起与挑战
最新发布
2402_83689311的博客
06-21 516
通过加强品牌建设、规范服务流程、完善法律法规、建立用户信任和创新商业模式等方式来不断提升服务质量和用户体验，从而赢得更多用户的信任和支持。同时，随着人们生活水平的提高和消费观念的转变，对于闲置物品的处理需求日益增长，为上门回收小程序提供了广阔的市场空间。上门回收小程序正是数字化趋势下的产物，它借助互联网平台的优势，实现了服务流程的优化和升级。同时，通过大数据和人工智能技术，上门回收小程序还能够实现精准营销和个性化服务，提高用户满意度和忠诚度。这一理念符合当代社会的环保趋势，有助于提升品牌形象和用户黏性。
Java聚合快递系统对接云洋系统快递小程序APP公众号系统源码
2401_84413757的博客
06-17 865
云洋系统作为行业领先的云计算平台，以其强大的数据处理能力和灵活的扩展性，为快递行业的变革提供了有力支持。通过深度对接各大快递公司，云洋系统实现了快递数据的实时同步和共享，为快递管理带来了质的飞跃。随着电商的蓬勃发展，快递业务量呈爆发式增长，而传统的快递管理方式已难以满足日益增长的需求。因此，如何提升快递管理的效率、降低运营成本、优化用户体验，成为了快递行业亟待解决的问题。快递小程序作为用户与快递系统之间的桥梁，其功能的丰富性和易用性对于提升用户体验至关重要。
java初学者小程序
06-02
Java初学者可以学习一些基本的编程知识，例如变量、数据类型、循环语句、条件语句、函数等，然后可以开始编写一些小程序来巩固所学的知识。以下是一个简单的Java小程序示例，可以让初学者尝试编写： ```java import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner input = new Scanner(System.in); System.out.print("请输入一个整数："); int num = input.nextInt(); if(num % 2 == 0) { System.out.println(num + "是偶数。"); } else { System.out.println(num + "是奇数。"); } } } ``` 以上程序要求用户输入一个整数，并判断该整数是偶数还是奇数。程序使用了`Scanner`类获取用户输入的数据，使用`if-else`语句判断输入的整数是否为偶数。 如果您需要更多的Java小程序示例，请告诉我您感兴趣的主题或领域，我会根据您的需求为您提供更多的示例和指导。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值