微信小程序基础

已于 2025-02-24 16:18:28 修改
阅读量314 收藏 2
点赞数 1
文章标签： 微信小程序 小程序
于 2025-02-18 11:20:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75165868/article/details/145699224
版权

1初识微信小程序

1.1什么是小程序

1.2 注册微信小程序账号

1.2.1 前置条件

一个邮箱只能开发一个小程序，一个人或者一个实体可以根据其身份类型申请多个小程序。例如，个人身份最多可以注册5个小程序，而企业、政府、媒体或其他组织类型的主体则最多可以注册50个小程序。但是，这些小程序需要使用不同的邮箱进行注册。 

微信小程序注册网站

 1.2.2完善信息

1.2.3项目成员与体验成员

         个人开发者，只能添加15个项目成员和15个体验成员，企业则可以添加90个项目成员和90个体验成员。

1.2.4 小程序开发者ID

 1.2.5微信小程序开发者工具

微信小程序开发工具下载链接

2小程序项目

2.1创建小程序项目

 2.2项目结构

主体文件

 页面文件

2.3新建页面

方法一：点击pages,右键--->新建文件夹--->新建page

方法二：

 2.4调试微信小程序

3 微信小程序配置文件

3.1 app.json

配置tabBar字段 

 

3.2页面配置

 

3.3配置sass

 会影响最终编译的都保存在project.config.json中

3.4sitemap.json

 4 小程序的样式和组件介绍

1. 基础布局标签

微信小程序标签HTML 标签说明
viewdiv基础容器，用于布局和包裹内容。支持 Flex 布局，默认块级元素。
scroll-viewdiv + CSS 滚动可滚动视图容器，需设置 scroll-x 或 scroll-y 属性。
swiperdiv + JS 轮播库轮播图容器，内置滑动切换功能（如 <swiper-item> 子项）。

2. 文本与富文本

微信小程序标签HTML 标签说明
textspan行内文本容器，支持长按复制、空格解析（space 属性）。
rich-textdiv + 富文本解析渲染富文本（如 HTML 字符串），通过 nodes 属性传入。

3. 媒体组件

微信小程序标签HTML 标签说明
imageimg图片组件，必须指定 src，支持懒加载（lazy-load）。
videovideo视频播放器，提供全屏、弹幕等扩展功能。
audioaudio音频播放器，需通过 API 控制播放。

4. 表单组件

微信小程序标签HTML 标签说明
formform表单容器，提交时通过 bindsubmit 事件获取数据。
inputinput输入框，类型通过 type 设置（如 text, number, idcard 等）。
textareatextarea多行输入框，支持自动增高（auto-height）。
buttonbutton按钮，支持开放能力（如 open-type="getUserInfo" 获取用户信息）。
checkboxinput[type=checkbox]复选框，需包裹在 checkbox-group 中。

5. 导航与路由

微信小程序标签HTML 标签说明
navigatora页面跳转链接，通过 url 指定目标页，支持后退（open-type="navigateBack"）。

6. 列表与交互

微信小程序标签HTML 标签说明
listul/ol列表容器，需结合 wx:for 循环渲染（类似 v-for 或 map）。
swipe-cell自定义实现侧滑删除组件（需注意平台兼容性）。

7. 其他功能组件

微信小程序标签HTML 标签说明
map第三方地图库地图组件，支持标记点、路线规划等（依赖微信 API）。
canvascanvas画布，需通过 wx.createCanvasContext 操作。

8关键差异与注意事项

  1. 事件绑定

    • 小程序使用 bindtap（点击事件）、bindinput（输入事件）等，类似 HTML 的 onclick、oninput。

    • 事件对象参数通过 event.detail 传递，而非 HTML 的默认事件对象。

  2. 样式与类名

    • 小程序使用 class 和 style 属性，但样式文件为 .wxss（支持部分 CSS3）。

    • 样式作用域默认局部（可通过 @import 引入全局样式）。

  3. 组件化设计

    • 小程序标签是封装的组件（如 scroll-view 自带滚动逻辑），而 HTML 标签更基础。

    • 部分功能需通过小程序原生组件实现（如相机 camera、实时音视频 live-pusher）。

  4. 平台限制

    • 小程序禁用部分 HTML 标签（如 iframe、script），需使用 API 或组件替代。

5 px、rpx、rem、vw

rpx（Responsive Pixel） 是微信小程序中用于适配不同屏幕尺寸的动态单位，具有以下核心特点：

1. 核心原理

  • 以屏幕宽度为基准：1rpx = 屏幕宽度的 1/750。
    例如：在 iPhone6（屏幕宽度 375px）中，1rpx = 0.5px；在更宽的设备上会自动等比放大。

2. 设计优势

  • 设计师友好：直接按 750rpx 宽度的设计稿标注尺寸，开发时无需复杂换算。

  • 自动适配：元素大小随屏幕宽度动态调整，保证不同设备上的显示一致性。

3. 与其他单位的对比

单位基准适用场景
rpx屏幕宽度（1/750）微信小程序、跨设备响应式布局
rem根字体大小Web 响应式设计
vw视窗宽度的 1%现代 Web 适配（如 H5）
px固定像素需要绝对尺寸的场景

6 全局样式和局部样式

7 image标签

8 swiper标签

 9 text标签

 10 navigator 组件

11 字体图标 

阿里巴巴图标库

使用步骤：

1 打开阿里巴巴图标库，搜索需要的图标

2添加到购物车

3 添加到项目

4复制css

5创建文件，并粘贴css

 6 导入全局（注意一定要以分号结尾）

 7 使用

8可以修改字体大小

 12 背景图片

   开发推荐使用base图片格式

13 事件系统

13.1绑定事件

 绑定事件

处理函数 

绑定输入框

  

在微信小程序中默认输入框默认没有边框

 13.2阻止事件冒泡

将原先bind换为catch 

 13.3 事件传参

方式一：data-*

 方式二:mark:*

14wxml语法

14.1声明和绑定数据 

声明数据



使用数据

效果 

 14.2setDate()修改数据

绑定事件 

 修改数据函数

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
  updateNum(){
    this.setData(
    {
      num:this.data.num+1
    })
  }

})

 14.3修改对象数据

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0,
    userinfo:{
      test:111,
      sex:'男'
    }
  },
updateUserinfo(){
    //新增(修改)单个或多个属性
    // 方法一：比较适合属性不多的情况
    // this.setData({
    //   'userinfo.name':"林绍玮",
    //   'userinfo.age':25
    // })
  
    // 方法二
    // const userinfo={
    //   ...this.data.userinfo,
    //   name:'林稍微',
    //   age:36
    // }
    // this.setData({
    //   userinfo
    // })

    // 方式三：Object.assign()，将多个对象合并为一个对象
    const userinfo=Object.assign(this.data.userinfo,{name:"王五"},{age:18})
    this.setData({
      userinfo
    })

    // 删除单个属性
    // delete this.data.userinfo.age
    // this.setData({
    //   userinfo:this.data.userinfo
    // })

    //删除多个属性
    const {age,test,...rest}=this.data.userinfo
    this.setData({
      userinfo:rest
    })

  },

})

14.4修改数组类型

// 更新list
  updateList(){

    // 新增
    // 方式一
    // this.data.list.push(4)
    // this.setData({
    //   list:this.data.list
    // })
    // 方式二
    // const newList=this.data.list.concat(4)
    // this.setData({
    //   list:newList
    // })

    // 方式三
    // const newList=[...this.data.list,4]
    //  this.setData({
    //   list:newList
    // })

    //修改数组
    // this.setData({
    //   'list[1]':8
    // })

    //删除数组元素
    // 方式一
    // this.data.list.splice(1,1)
    // this.setData({
    //   list:this.data.list
    // })

    // 方式二
    const newList=this.data.list.filter(item=>item !== 2 )
    this.setData({
      list:newList
    })
  },

14.5简易双向数据绑定

单向绑定 

<input type="text" value="{{value}}"/>

双向绑定

<input type="text" model:value="{{value}}"/>

复选框 

<checkbox model:checked="{{isChecked}}"/>

14.6列表渲染

 

block标签类型于vue的template 标签

14.7条件渲染 

方式一

 

方式二 

一、wx:if 条件渲染

原理：通过动态创建/销毁组件实现条件渲染（类似 Vue 的 v-if）。

二、hidden 属性控制

原理：通过 CSS 的 display: none 隐藏组件（类似 Vue 的 v-show）。

三、wx:if vs hidden 对比

特性wx:ifhidden
渲染机制条件为 false 时销毁组件始终渲染，仅控制显示/隐藏
性能消耗适合条件不频繁变化的场景适合需要频繁切换的场景
初始渲染成本条件为 false 时不渲染无论条件如何都会初始渲染
组件状态切换时会销毁/重建（状态丢失）保持组件状态

15 生命周期 

15.1小程序运行机制

 15.2小程序更新机制

onLoad: function (options) {
    // 获取小程序更新管理器实例
    const updateManage = wx.getUpdateManager();

    // 监听向微信后台请求检查更新结果的事件
    updateManage.onUpdateReady(function () {
        // 当新版本准备就绪时，会触发此回调函数
        // 弹出确认对话框，提示用户新版本已准备好，并询问是否重启应用以应用更新
        wx.showModal({
            title: '更新提示', // 对话框标题
            content: '新版本已经准备好了，是否重启应用？', // 对话框内容
            success(res) { // 用户点击确认按钮后的回调函数
                // res.confirm 表示用户是否点击了确认按钮
                if (res.confirm) {
                    // 应用新版本并重启小程序
                    updateManage.applyUpdate();
                }
            }
        })
    });
},

 小程序开发模拟更新

 15.3 微信小程序的生命周期

15.3.1 应用生命周期 

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log("onLaunch 执行了");

  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log("onshow执行了");
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log("onHide执行了");
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
   
  }
})

15.3.2页面生命周期

16 微信小程序API

16.1网络请求 

举例 

 getData(){

    wx.request({
      url: 'https://gmall-prod.atguigu.cn/mall-api/index/findBanner',
      // 请求方法
      method:'GET',
      // 请求参数
      data:{},
    //  请求头
      header:{},
      // API成功后的回调，
      success:(res)=>{
        
        if(res.data.code==200){
         this.setData({
           data:res.data.data
         })
        }
      },
      // 失败后的回调
      fail:(err)=>{
        console.log(err);
      },
      // 不管调用成功还是失败都会执行
      complete:(res)=>{
       console.log(res);
      }

    })
  },

 当开发时，可以开启不校验合法域名，就可以请求数据，不用去微信小程序官网配置域名，等上线的时候再去配置域名。

16.2 Loading提示框 

 getData(){
   
    // 开启提示框
    wx.showLoading({
      title: '数据加载中...',
      //  是否显示一个透明蒙层。如果设置为 true，则会覆盖整个屏幕，阻止用户的其他操作直到加载结束。
      mask: true
    })

    wx.request({
      url: 'https://gmall-prod.atguigu.cn/mall-api/index/findBanner',
      // 请求方法
      method:'GET',
      // 请求参数
      data:{},
    //  请求头
      header:{},
      // API成功后的回调，
      success:(res)=>{
        
        if(res.data.code==200){
         this.setData({
           data:res.data.data
         })
        }
      },
      // 失败后的回调
      fail:(err)=>{
        console.log(err);
      },
      // 不管调用成功还是失败都会执行
      complete:(res)=>{
        // 关闭提示框
       wx.hideLoading()
      }

    })
  },

16.3 模态对话框和消息提示框

async delHeadle(){
  //  开启模态对话框
  const {confirm} = await wx.showModal({
      title: '提示',
      content: '是否删除数据',
    })

  if(confirm){
    // 显示提示框
    wx.showToast({
      title: '删除成功',
      // 图标选择
      icon:'none',
      // 展示时间
      duration:2000
    })
  }else{
    wx.showToast({
      title: '删除失败',
      icon:"error",
      duration:2000
    })
  }
  },

 16.4本地存储

16.5路由与通信

 16.6 上拉加载

配置上拉加载 

 页面上拉触底事件的处理函数

 16.7下拉刷新

 在js中，设置下拉刷新处理逻辑

 16.8增强scroll-view

 17自定义组件

17.1创建组件和注册组件

 

17.2组件的数据及方法 

 17.3属性properties

用于往组件中传递数据

其中label和position表示往组件内部传递的数据。

下面是数据接收，分为简写和全写方式

17.4 slot插槽 

17.4.1 默认插槽 

17.4.2具名插槽 

组件中开启多个插槽

 

 17.5自定义组件的注意事项

17.6  组件样式隔离   

  

17.7 数据监听器

 举例

<!--components/custom1/costom1.wxml-->
<button type="primary" plain bindtap="update"> 更新数据</button>
<view>{{num}}</view>
<view>{{count}}</view>
<view>{{obj.name}}</view>
<view>{{arr[1]}}</view>
<view>{{label}}</view>
// components/custom1/costom1.js
Component({

  // 监听属性更新
  observers:{
    // key为监听的属性
    //value为回调函数，形参为最新值

    //监听单个属性
    // 'num':function(newNum){
    //   console.log(newNum);
    // }

    //同时监听多个属性
    'num,count':function(newNum,newCount){
       console.log(newNum,newCount);
    },
    
    //监听对象的属性
    'obj.name':function(newName){
      console.log(newName);
    },

    //通配符，监听对象
    'obj.**':function(newObj){
      console.log(newObj);
    },

    //监听数组变化
    'arr[1]':function(newValue){
      console.log(newValue);
    },
    //监听上级传给子的数据，默认初始化会执行一次
    'label':function(newLabel){
      console.log(newLabel);
    }
    

  },

  /**
   * 组件的属性列表
   */
  properties: {
      label:String
  },

  /**
   * 组件的初始数据
   */
  data: {
     num:10,
     count:100,
     obj:{name:"tom",age:10},
     arr:[1,2,3]
  },

  /**
   * 组件的方法列表
   */
  methods: {

    update(){
      this.setData({
        num:this.data.num+1,
        count:this.data.count-1,
       'obj.name':'lsw',
       'arr[1]':10000
      })

    }

  }
})

17.8组件通信

17.8.1父传子 

父

 子

// pages/mypage/custom-swiper/custom-swiper.js
Component({
   options:{
     multipleSlots:true
   },
  /**
   * 组件的属性列表
   */
  properties: {
    checked:{
      type:Boolean,
      value:false
    }
  },

  observers:{

    'checked':function(newValue){
      console.log(11);
         this.setData({
          isChecked:newValue
         })
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
     isChecked:false   
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

 17.8.2子传父

 

 

 17.8.3 获取组件实例

 res输出如下

17.9组件的生命周期 

 

 

17.10生命周期总结

冷启动

关闭页面

热启动

 17.11 Behavior

在微信小程序中，Behavior 是一种用于组件间代码复用的机制，类似于 Vue 中的 mixins。

// my-behavior.js
export default Behavior({
  // 数据字段
  data: {
    sharedData: '默认值'
  },

  // 生命周期（会被组件和所在 Behavior 合并）
  lifetimes: {
    attached() {
      console.log('Behavior attached');
    }
  },

  // 方法
  methods: {
    sharedMethod() {
      console.log('调用了 Behavior 的方法');
      this.setData({ sharedData: '修改后的值' });
    }
  },

  // 其他可定义字段（同组件）
  properties: {},
  observers: {},
  // ...
});

引入 Behavior
在组件的 .js 文件中导入并引用：

// component.js
import myBehavior from './my-behavior.js';

Component({
  behaviors: [myBehavior], // 注入 Behavior

  // 组件自身定义
  data: { localData: '组件数据' },
  methods: {
    localMethod() {
      this.sharedMethod(); // 调用 Behavior 的方法
      console.log(this.data.sharedData); // 访问 Behavior 的数据
    }
  }
});

合并规则与优先级

  1. 数据 (data & properties)
    同名字段会进行递归合并，组件自身数据优先级高于 Behavior。
    如果多个 Behavior 有冲突，按数组顺序后者覆盖前者。

  2. 方法 (methods)
    同名方法会被覆盖，规则同上。

  3. 生命周期 & 观察者
    生命周期函数（如 attached）和观察者（observers）会全部执行，执行顺序为：
    Behavior 按数组顺序 → 组件自身。

  4. 冲突处理
    若出现不可合并的冲突（如同名非函数字段），会在控制台输出警告，组件优先

18小程序中使用npm

npm初始化 

构建npm 

18.1自定义npm包

可以观看视频:自定义构建npm 

18.2使用vant

官网：介绍 - Vant Weapp

导入步骤：快速上手 - Vant Weapp

19分包加载

20开放能力

20.1获取微信头像

当了此时获取的微信头像路径是一个临时的路径，在浏览器是访问不到的，需要我们将头像上传到服务器上面。

20.2获取微信昵称

 

20.3获取转发功能

 

 20.4分享到朋友圈

测试了好像没有效果，好像要去微信小程序上面申请，要钱的

20.5 手机号验证组件

 

20.6客服功能 

21框架接口

21.1getApp

21.2页面间的通信

 

21.3组件通信--事件总线 

 

21.4自定义导航栏

 

 更改前

更改后

22 上线发布

 

 

 23 项目初始化

创建miniprogram,然后将下面文件剪切进去

npm初始化

在project.config.json添加如下配置 

24通用模块的封装

24.1消息提示框封装

未封装前

 封装后

使用

 还有全局配置方式

使用

 

24.2模态对话框封装

封装前

封装

const modal = (options = {}) => {
  return new Promise((resolve) => {
    const defaultOpt = {
      title: '提示',
      content: '您确定要执行该操作吗？',
      confirColor: '#f3514f'
    }

    const opts = Object.assign({}, defaultOpt, options)
    wx.showModal({
      ...opts,
      complete({
        confirm,
        cancel
      }) {

        confirm && resolve(true)
        cancel && resolve(false)
      }
    })
  })

}
// 全局配置
wx.modal = modal

 使用

24.3封装本地存储

// 存储数据
export const setStroage=(key,value)=>{
  try{
    wx.setStorageSync(key, value)
    }catch(err){
    console.error(`存储指定${key}数据发生了异常`,err)
  }
}

//读取数据
export const getStroage=(key)=>{
  try{
    const value =wx.getStorageSync(key)
    if(value){
      return value
    }
  }catch(err){
    console.error(`读取指定${key}数据发生了异常`,err)
  }
}

//移除指定key
export const removeStroage=(key)=>{
  try{
   wx.removeStorageSync(key)  
  }catch(err){
    console.error(`移除指定${key}数据发生了异常`,err)
  }
}

//清除全部kkey
export const clearStroage=()=>{
  try{
    wx.clearStorageSync()
  }catch(err){
    console.error(`移除全部数据发生了异常`,err)
  }
}

使用

25 promise补充

ES6 Promise的用法，async/await异步处理同步化 - 哔哩哔哩

26 网络请求

网站：mina-request - npm

配置http.js

import WxRequest from 'mina-request'
import {getStorageSync,clearStorageSync} from './stroage'
import {toast,modal} from  './extentApi'

// 对 WxRequest 进行实例化
const instance = new WxRequest({
  baseURL: 'https://some-domain.com/api', // 使用时请换成真实接口
  timeout: 15000, // 超时时长
  // isLoading: false // 是否使用默认的 loading 效果
})

// 添加请求拦截器
instance.interceptors.request = (config) => {
  // 获取token
   const token=getStorageSync('token')
   if(token){
     config.header['token']=token
   }

  // 在发送请求之前做些什么
  return config
}

// 添加响应拦截器
instance.interceptors.response =async (response) => {

  // response.isSuccess = true，代码执行了 wx.request 的 success 回调函数
  // response.isSuccess = false，代码执行了 wx.request 的 fail 回调函数
    
  // response.statusCode // http 响应状态码
    
  // response.config // 网络请求请求参数
    
  // response.data 服务器响应的真正数据
    
  // 对响应数据做点什么
 const{isSuccess,data}=response
 if(!isSuccess){
   toast({
     title:"网络异常请重试",
     icon:"error"
   })
   return Promise.reject(response)
 }

 switch (data.code) {
   case 200:
     return data
    
   case 208:
   const res=await  modal({
       content:'鉴权失败，请重新登录',
       showCancel:false
     })
    if(res){
      clearStorageSync()
      wx.navigateTo({
        url: '/pages/login/login',
      })
    }
    return Promise.reject(response)

 
   default:
     toast({
       title:'程序出现异常，请联系客服或稍后重试'
     })
     return Promise.reject(response)
 }

 
  return response
}

export  default instance

27接口调用方式 

 

 

 

28设置环境变量

创建配置文件env.js

const {miniProgram}=wx.getAccountInfoSync()
const {envVersion}=miniProgram

let env={
  baseURL: 'https://some-domain.com/api'
}

switch (envVersion) {
  // 开发版本
  case 'develop':
    env.baseURL='https://some-domain.com/api1111'
    break;
  // 测试版本
  case 'trial':
    env.baseURL='https://some-domain.com/api2222'
    break;
  // 正式版本
  case 'release':
    env.baseURL='https://some-domain.com/api3333'
    break;
// 默认
  default:
    env.baseURL='https://some-domain.com/api'
    break;
}

export default env

在http.js中导入

         

29 miniprogram 

29.1mobx-miniprogram

类似于pinia

 npm install mobx-miniprogram mobx-miniprogram-bindings

官方文档：

  1. mobx-miniprogram 官方文档

  2. mobx-miniprogram-bindings 官方文档

 

微信小程序自定义组件数据、方法和属性
实践求真知
09-09 4895
微信小程序
微信小程序
最新发布
m0_46702681的博客
03-29 653
WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。WXSS (WeiXin Style sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。
一个小程序账号下可以有几个小程序？
热门推荐
yumihe
08-20 6万+
在微信公众平台上，小程序名称、头像只能设置一个 在小程序账号注册时，已经说明了，每个邮箱仅能申请一个小程序   所以，一个小程序账号只能发布一个小程序，如果想要发布最新版本的会把之前的版本覆盖掉； 或者发布了另一个小程序，也会把之前的小程序替换掉。 【个人帐户可以发5个、企业50个】指的是同一个身份证号可以注册几个帐号。          ...
微信小程序 自定义组件-数据、方法、属性
qq_35262929的博客
11-09 1253
微信小程序中自定义组件的数据、方法、属性及数据监听器
微信小程序之自定义组件开发
gghhb12的博客
11-06 2540
从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。2.1 创建在项目的根目录中右键，创建components–>test文件夹在新建的components–>test文件夹上右键，点击“新建Component”
【微信小程序】基础篇 -- 自定义组件 -- 数据、方法和属性（三十三）
JMFive的博客
03-10 5147
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第33篇文章;今天开始学习微信小程序的第17天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。
微信小程序自定义组件的使用，来自项目的总结
仇益阳的博客
07-07 8042
小程序自定义组件的使用 一直以来忙项目都没有什么时间来写博客，今天晚上刷了会儿csdn,知乎等平台，发现有很多人再问小程序自定义组件怎么写，如何编写一个自己的自定义组件？当然也有一些同行们对于这些问题都有解答。 今天就自己的项目经验给大家从构建自定义组件，调用自定义组件，传值给组件，组件传值出来，给大家讲解一下如何构造一个自定义视频组件 大家可能都刷过火山小视频，本次讲解的就是做的一款类似于...
【B0001】Axure微信小程序基础元件库.zip
07-06
作品简介：根据微信小程序官方的设计文件与设计规范，完全Axure化的微信小程序基础原件库。 版本记录 V1.0.0 原型新建 1、常用多种状态提示、按钮。 2、常见的表单、输入框、常用场景表单组合等。 3、常用弹框...
【微信小程序教程】微信小程序基础教程附带案例分析
05-21
微信小程序教程微信小程序教程微信小程序教程微信小程序教程微信小程序教程微信小程序教程微信小程序教程微信小程序教程微信小程序教程微信小程序教程微信小程序教程微信小程序教程微信小程序教程微信小程序教程微信...
微信小程序基础学习源码
12-12
微信小程序基础学习源码，顾名思义，是一套可供开发者学习微信小程序开发的源码资源。这套源码可能包括了小程序的各种基本功能实现的示例，比如用户登录、数据存储、界面布局、组件使用等。这些学习资源有助于初学者...
微信小程序开发完整代码
08-27
微信小程序开发完整代码
CSDN最全面的微信小程序源码和模板
03-08
从事微信小程序开发也有差不多半年的时间了，本人深知对于从来都没有接触过微信小程序开发的人刚开始是多么的迷茫，无助。其实我刚开始也是这样，然而进过一段时间的开发，学习，我知道了其实网上有很多人进行分享过，可以参照他们的进行开发学习，这样不仅仅可以达到事倍功半的效果。这是我自己在网上收集，和一些自己做的一些小程序，想分享出来帮助大家更好的学习开发，其中包括了一些比较完善的小程序开源框架，还有几套比较完善的微信小程序商城模板，和源码只需自己把接口替换成自己的即可，希望能够帮到大家。
一篇文章把握微信小程序的基本概念——微信小程序快速入门
xiaoxu的博客
01-29 1330
微信小程序 小程序起步 小程序开发与普通网页的开发不同，不同点如下 运行环境不同微信小程序当然运行在微信的环境中了 API不同无法使用Dom和Bom使用微信提供的api 开发模式的不同 对开发模式做简要的说明。在开发模式上主要是网页开发需要浏览器，和编辑器 小程序开发模式 申请小程序开发账号 安装小程序开发工具 创建和配置小程序项目 第一个小程序 第一步注册小程序开发账号，进入微信的开发者平台 https://mp.weixin.qq.com/ 找到立即注册注册一个开发者账号 之前自己注册过过
【微信小程序】手把手教你创建自定义组件及其应用（超级详细）
【安歌er】的博客
12-24 1361
在项目的。
小程序基本命令
aiven1637的博客
10-30 3413
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
【微信小程序开发零基础入门】——微信小程序入门
leah126的博客
07-10 4573
2017 年度百度百科十大热词之一微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小， 下载速度很快，用户感觉不到下载的过程 )小程序刚发布的时候要求压缩包的体积不能大于 1M,，否则无法通过，在 2017 年 4 月做 了改进，由原来的 1M 提升到 2M；2017 年 1 月 9 日 0 点，万众瞩目的微信第一批小程序正式低调上线。
微信小程序开发详解
2303_76218115的博客
04-23 3876
微信小程序是一种可以在微信中运行的应用程序，它使用了微信提供的开发框架和工具，可以在不需要下载安装的情况下直接使用。微信小程序采用了类似Web的开发方式，开发者可以使用HTML、CSS、JavaScript等前端技术进行开发。无需下载安装，直接在微信中使用可以访问部分系统API，实现更强大的功能通过微信提供的开发框架和工具，可以方便地进行开发、测试和发布在 components 目录下创建组件文件夹,同级目录创建 json、js、wxml、wxss 四个文件。文件名与文件夹名相同。
【微信小程序实战教程】之微信小程序简介
柯晓楠
07-24 5548
微信小程序（英文名称是 Mini Program）简称小程序，是一种基于微信的轻量级应用程序，是一个全新的概念。微信创始人张小龙曾这样介绍小程序：小程序是一种不需要下载、安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用，这也体现了“用完即走”的理念。小程序是一种全新的开放能力，开发者可以快速地开发一个小程序并且在微信内被便捷地获取和传播，同时具有出色的使用体验。用户不需要关心手机应用占用太多存储空间的问题以及应用安全问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值