一、微信小程序是什么

微信小程序是一种不需要下载安装即可使用的应用
微信小是2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。

二、微信小程序商业价值

依托微信，有强大广泛的用户基础，推广方便
不用安装，即点即用，不用关闭，不占手机内存空间

三、微信小程序和普通H5的区别

微信小程序没有DOM,BOM的API，只能使用EcmaScript核心部分（数组，字符串方法，for,if…）
微信小程序js逻辑和视图处理是分开独立运行的，性能比较好，而普通H5是单线程的，容易导致代码阻塞

四、微信小程序的帐号注册及开发流程

微信小程序的注册

注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN按照连接地址给出的提示进行注册

微信小程序登录：

https://mp.weixin.qq.com/登录后：找到开发-开发管理-开发设置-开发者IDAppID(小程序ID) wxb61621e772a9f027

开发和发布流程

开发->提交->审核->发布上线

五、小程序环境搭建与目录结构

微信开发者工具的下载与安装

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

使用微信开发者工具创建小程序项目并运行

创建小程序项目的界面如下：

六、手机运行测试

点击微信开发者工具--预览按钮（二维码预览和自动预览）真机调试：通过开发者工具控制台来实时的高度真机上的项目

七、项目组合作开发项目

1.在组长微信小程序管理后台：管理-成员管理-点击添加成绩按钮（搜索组员微信号按提示添加）
2.从码云上克隆项目(第一次：git clone，后面只是git pull)
3.....每天完成对应的任务
4.再提交到组长指定的仓库分支上

八、小程序目录结构分析与说明

目录结构说明：

app.js:小程序的入口文件 相当于vue中的main.js
app.json:是小程序的全局配置文件，即如果没配置页面json，会自动使用app.json中的配置
app.wxss:是小程序的全局css样式文件,会影响到所有小程序页面的样式
了解 project.config.json：是开发者工具环境配置项
了解 sitemap.json：是不允许小程序蜘蛛索引页面
pages:咱们平时干活常用的目录  相当于vue上的srcindexindex.wxml:即页面的结构  相当于htmlindex.wxss:即页面的样式  相当于cssindex.js:即页面的逻辑部分 index.json:即页面的配置文件utils:存放常用工具函数的目录,方便复用问题：小程序如何创建一个新的页面？新建页面目录--在目录上右键--选择新建page并输入文件名并回车

九、小程序如何实现tabBar导航

第一步：在app.json中添加tabBar配置属性
第二步：在tabBar的list属性中配置要添加的条目注意：最少配置2个，最多5个tabBar参考文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

配置tabBar具体演示代码：

{...."tabBar": {"borderStyle":"white",  //tabBar是否有顶部边框"list": [  //配置tabBar的列表项数组{"text": "首页", //每项的名称"pagePath": "pages/index/index", //要打开的页面路径，跟pages项有关"iconPath": "/imgs/home.png",    //未选中的图标路径"selectedIconPath": "/imgs/home_active.png"  //选中的图标路径},{"text": "我的","pagePath": "pages/logs/logs","iconPath": "/imgs/my.png","selectedIconPath": "/imgs/my_active.png"}]},....
}

十、wxml常用标签

1. view标签：是一个块级标签，相当于普通H5中的div
2. text标签：是一个行内标签 相当于span
3. button：按钮
4. block:是一种不会渲染到页面的标签  相当于vue中template标签,起到一个逻辑组织代码块的作用
5. image:插入图片

十一、小程序常用指令

程序的主入口和页面入口函数

主入口

App({方法,初始化的数据对象
})例如：
App({onLaunch() {},globalData: {a:,b:2}
})

页面入口

page({data:{},方法1() {},方法2() {},方法3() {},
})

小程序的常用指令

(1)遍历：wx:for  相当于vue的v-for注意：默认的遍历每项用item表示默认的下标用index表示通过wx:for-index="自定义下标名称" 实现下标自定义通过wx:for-item="自定义每项名称"实现每项名称的自定义通过使用wx:for遍历时通常跟一个wx:key来提高遍历性能，通常wx:key用*this或遍历对象的唯一属性名表示例如：<view class="item" wx:for="{{ list }}" wx:key="id"><text>商品名称：{{ index+1 }} 、 {{ item.name }}</text><text>--商品价格： {{ item.price }}</text></view>(2)条件渲染：第一种：wx:ifwx:if 相当于vue中的v-ifwx:if 和wx:else第二种：hidden 相当于vue中的v-show的取反

作业：
1. 完成积云《学生系统》小程序页面的布局+tabBar（4个页面）
2. 微信语音说课
3. 写技术博客
4. 牛客网刷题

微信小程序基础知识相关推荐

【微信小程序】微信小程序基础知识篇
开发文档小程序简介 | 微信开放文档 1.微信小程序的环境准备 1.1注册账号 1.2获取APPID 是开发者唯一的身份认证,应用要发布要上线必须提供APPID 1.3开发工具由于微信小程序自带开 ...
微信小程序基础知识 || 如何让微信开发者工具显示切后台按键
文章目录初识小程序与普通网页开发的区别体验小程序获取AppID 开发者工具下载在模拟器上查看项目效果在真机上预览项目效果主界面的 5 个组成部分常用快捷键宿主环境简介通信模型运行 ...
前端程序员需要了解的原生微信小程序-基础知识
前言:该学原生小程序啦文档: 微信开放文档工具下载: 稳定版 Stable Build | 微信开放文档 HBuilderX-高效极客技巧你要是uniapp开发的就这个HB编译器打开项目运行 ...
微信小程序基础知识3
再续一篇- 十四. 页面导航声明式导航 :在页面上声明一个<navigator>导航组件,通过点击<navigator>组件实现页面跳转导航到 tabBar 页面:在使用 ...
视频教程-2020最新微信小程序基础+实战精讲视频-微信开发
2020最新微信小程序基础+实战精讲视频负责过多个软件项目的研发.设计和管理工作,拥有项目管理师认证.项目监理师中级认证.出版过的图书有<微信小程序开发图解案例教程><Axure ...
更改微信小程序的基础版本库；更改uni-app小程序基础库；更改用户的微信小程序基础库最低版本；设置用户的微信小程序版本库；
需求场景:微信小程序不少API都有最低版本支持,为了避免不必要的麻烦,我们可以根据需要给小程序设置基础库最低版本,这样若用户使用的基础库版本低于设置的最低版本要求,则无法正常使用小程序,并提示更新微信 ...
微信小程序在线知识答题有奖多开版源码
介绍: 微信小程序在线知识答题有奖源码是一款搭建在微擎上使用的主要功能答题有奖红包,可配合流量主推广,广告变现,后台含有区间余额区间奖励配置,自定义金额提现配置: 题库后台自己输入就可以了 .开 ...
《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
微信小程序基础（全家福01）
微信小程序基础目标能够知道如何创建小程序项目能够清除小程序项目的基本组成结构能够知道小程序页面有几个部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行协同开发和发布讲解目录 ...

微信小程序基础知识

一、微信小程序是什么

二、微信小程序商业价值

三、微信小程序和普通H5的区别

四、微信小程序的帐号注册及开发流程

五、小程序环境搭建与目录结构

六、手机运行测试

七、项目组合作开发项目

八、小程序目录结构分析与说明

九、小程序如何实现tabBar导航

十、wxml常用标签

十一、小程序常用指令

微信小程序基础知识相关推荐

最新文章

热门文章

微信小程序 基础知识

一、微信小程序是什么

二、微信小程序商业价值

三、微信小程序和普通H5的区别

四、微信小程序的帐号注册及开发流程

五、小程序环境搭建与目录结构

六、手机运行测试

七、项目组合作开发项目

八、小程序目录结构分析与说明

九、小程序如何实现tabBar导航

十、wxml常用标签

十一、小程序常用指令

微信小程序 基础知识相关推荐

最新文章

热门文章

微信小程序基础知识

微信小程序基础知识相关推荐