前言:

微信小程序开入入门,如果你有html+css+javascript的基础,那么你就很快地上手掌握的。下面提供微信小程序官方地址:https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

下面一起学一学,微信小程序的框架吧~看文档,别学别理解。在下的讲述如果不正确的话,可以参考官方文档,也可以帮忙改正。具体还得看官方文档。

目录

微信小程序的介绍,如何上手小程序,开发的框架,组件,api,技能与实战,注意事项。

介绍

为啥会有小程序,因为市场的需要,小程序可是什么呢?小程序是一种用完即走的那么一种模式,从开始的B2C模式,人与商品,到P2P模式,人与人,在到C2P模式,人与服务,小程序就是那么一种人与服务,小程序不用下载?

不是的,只是它的下载很小,你根本体会不到它的下载,而且对于那种要停留下来很久的,小程序一般不适用,对于订票,购票,小游戏,等,用于对某款APP中的某功能划分出来做小程序很实用,是用来服务人的产品,想我们手机中的支付宝,里面有很多功能镶入到框框里。

小程序的日常应用,如去一家店吃面时,不用叫服务员点餐而是有个二维码在你的桌上,用你的手机扫一扫就行。


概述

小程序是不需要安装的,可以立即使用,实现了“触手可及”的梦想,以及“用完即走”的理念,用户不用担心安装太多应用导致内存不足的问题,小程序无处不在。

小程序的好处

开发准备

  1. 注册小程序账号
  2. 激活邮箱
  3. 信息登记
  4. 登录小程序后台
  5. 完善信息
  6. 绑定开发者
小程序版本 名称
1 开发版本
2 体验版本
3 审核版本
4 线上版本

小程序的结构

结构名称 意义
app.js 注册微信小程序应用
app.json 小程序的全局 配置,网络超时时间以及路径
app.wxss 全局的样式
project.config.json 保存我们的微信开发者的配置信息
pages 所有的小程序页面
utils 存放的一些工具的函数,达到代码复用的目的

Pages具备属性

tabBar
networkTimeout
debug
navigationStyle
navigationBarBackgroundColor
navigationBarTextStyle
navigationBarTitleText
backgroundColor
backgroundTextStyle
onReachBottomDistance
enablePullDownRefresh

page具备属性

navigationBarBackgroundColor
navigationBarTextStyle
navigationBarTitleText
backgroundColor
backgroundTextStyle
onReachBottomDistance
enablePullDownRefresh
disableScroll

微信小程序完整的开发框架,api等

基本构成

wxml
wxss
wxs
javascript

wxml

模板引用:1. import ;2. include

案例

// index.wxml
<import src="a.wxml"></import>
<template is="a"></template>
// a.wxml
<view>hello</view>
<template name="a">
hello,hello
</template>
// 结果
hello,hllo
// index.wxml
<import src="a.wxml"></import>
<template is="a></template> // a.wxml
<import src="c.wxml">
<template name="a">
this is a.wxml
</template>
<tempalate is="b"></template> // b.xml
<template name="b">
this is b.wxml
</template> // 结果
this is a.wxml
// index.wxml
<include src="a.wxml"/>
<template is="a"></template> // a.wxml
<template name="a">
<view>
this is a.wxml
</view>
</template>
<view>hello</view>
// 结果
hello

wxss

wxss特殊之样式

// index.wxml
<view class="container">
hello
</view> // index.wxss
@import './asssets.wxss';
.container {
color: red;
}
// assets.wxss
.container {
border: 1px solid #000;
}
// index.wxml
<view style="">
</view>

wxss目前支持的选择器:

.class
#id
element
element,element
::after
::before

微信小程序JavaScript

微信小程序开发生命周期

程序生命周期

onLaunch
onShow
onHide
onError

页面生命周期

onLoad 监听页面加载
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载

生命周期

不用马上懂,别做项目别懂就行。

事件

组件

视图容器组件:

view,scroll-view,swiper,movable-view,cover-view

基础内容

icon,text,rich-text,progress

表单组件:

button,checkbox,form,input,label,picker,picker-view,radio,switch,text-area

媒体组件

audio,image,video,live-player,camera,live-pusher

导航组件

navigato

地图组件

mapj

画布组件

canvas

开发能力组件

open-data
web-view

微信小程序-API

格式具备:

wx.on
object参数
wx.get/wx.set
success
fail
complete

结语

  • 本文主要讲解 微信小程序开发基础
  • 下面我将继续对其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

微信小程序开发基础的更多相关文章

  1. 微信小程序开发基础知识总结

    微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很 ...

  2. 微信小程序开发 -- 01

    微信小程序开发基础 -- 开发前的准备 缘由 1月9日张小龙微信小程序正式上线,因为微信,所以小程序从诞生开始就头戴巨大的光环,很多的团队,公司以及开发的个体都眼巴巴的盯着这个小程序.而那个时候我却在 ...

  3. 微信小程序开发——后端Java(一)

    一.前言 最近接触了小程序的开发,后端选择Java,因为小程序的代码运行在腾讯的服务器上,而我们自己编写的Java代码运行在我们自己部署的服务器上,所以一开始不是很明白小程序如何与后台进行通信的,然后 ...

  4. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  5. 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  6. 微信小程序开发日记——高仿知乎日报(下)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  7. 微信小程序开发日记——高仿知乎日报(中)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

  8. 微信小程序开发日记——高仿知乎日报(上)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  9. 微信小程序开发工具测评

    1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...

随机推荐

  1. 安卓开发笔记(二十五):ViewPager的使用

    首先我们来看看运行之后的效果: 然后我们也不多说废话了,下面是这个项目所需要的全部代码,很多博主写这个都不把代码写完,因此笔者自己也琢磨了一会儿才把这个弄出来,感觉很烦,但我肯定会把代码写全的.我这里 ...

  2. Git:四、连接GitHub远程仓库

    1.拥有一个GitHub网站的账号 2.创建SSH Key 打开终端(Windows打开Git Bash),输入: ssh-keygen -t rsa -C "youremail@??.co ...

  3. Linux基本操作——文件相关

    一.前言 无论是IC工程师.FPGA工程师还是嵌入式软件工程师,都或多或少会接触到Linux操作系统.有很多EDA工具只有Linux版本,因此掌握基本的操作和常用命令十分必要.Linux中的数据均以文 ...

  4. PXE安装windows系统,pxe-e55:ProxyDhcp service did not reply to request on port 4011

    这个pxe-e55" 错误表示 pxe 客户端已向端口4011上的代理 dhcp 服务器发送请求, 但未收到答复.似乎只有在dhcp 服务器上设置了 dhcp 类标识符选项 #60, 但同一 ...

  5. 白话kubernetes的十万个为什么(持续更新中...) - kubernetes

    Kubernetes简称? 答:k8s或kube. Kubernetes是什么? 答:由Google开发的一个强大的平台,可以在集群环境中管理容器化应用程序.本质上是一种特殊的数据库,里面存储的是能够 ...

  6. Scala设计模式

    尽管Scala还有一些基于语言特性的设计模式,单本文还是着重于介绍大家所周知的经典设计模式,因为这些设计模式被认为是开发者之间交流的工具. 创建型设计模式 1.工厂方法模式 2.延迟加载模式 3.单例 ...

  7. Oracle AWR报告生成和性能分析

    目录 一.AWE报告生成步骤 1.1 工具选择 1.2 自动创建快照 1.3 手工创建快照 1.4 生成AWR报告 二.AWR报告分析 2.1 AWR之DB Time 2.2 AWR之load_pro ...

  8. arguments对象详解

    在javascript中,函数是没有重载这一项的,所谓的重载,一个函数可以有多个,就是参数的个数和形式不同所以引用的功能不同,而js不存在函数重载,不管传不传参数,函数里面是否引用,关系都不大,一个函 ...

  9. 机器学习——logistic回归,鸢尾花数据集预测,数据可视化

    0.鸢尾花数据集 鸢尾花数据集作为入门经典数据集.Iris数据集是常用的分类实验数据集,由Fisher, 1936收集整理.Iris也称鸢尾花卉数据集,是一类多重变量分析的数据集.数据集包含150个数 ...

  10. 强化学习(八)价值函数的近似表示与Deep Q-Learning

    在强化学习系列的前七篇里,我们主要讨论的都是规模比较小的强化学习问题求解算法.今天开始我们步入深度强化学习.这一篇关注于价值函数的近似表示和Deep Q-Learning算法. Deep Q-Lear ...