网站建设价格一览表,网站建设无法访问网站,网站内部链接怎么做的,有什么网站是可以做ui的第1章 微信小程序基础
1.1 微信小程序介绍
1.1.1 什么是微信小程序
微信小程序的特点#xff1a;
① 微信小程序是不需要下载和安装的#xff1b;
② 它可以完成App应用软件的交互功能#xff1b;
③ 用户扫一扫或者搜一下就可以使用小程序#xff1b;
④ 微信小程序…第1章 微信小程序基础
1.1 微信小程序介绍
1.1.1 什么是微信小程序
微信小程序的特点
① 微信小程序是不需要下载和安装的
② 它可以完成App应用软件的交互功能
③ 用户扫一扫或者搜一下就可以使用小程序
④ 微信小程序无处不在随时随地可以使用
⑤ 微信小程序无须卸载应用方便。
1.1.2 微信小程序发展历程
① 2016年1月9日微信团队首次提出“应用号”概念。
②2016年9月22日微信公众平台对外发送小程序内测邀请内测名额200个。
③2016年11月3日微信小程序对外公测开发完成后可以提交审核但公测期间不能发布。④2016年12月28日张小龙在微信公开课上解答外界对微信小程序的几大疑惑包括没有应用商店、没有推送消息等内容。
⑤2016年12月30日微信公众平台对外公告上线的微信小程序最多可生成10000个带参数的二维码。
⑥2017年1月9日微信小程序正式上线。
1.1.3 微信小程序提供的功能
1.支持分享当前界面功能分享出去的是动态的界面
2.小程序线下扫码功能
3.小程序支持挂起状态
4.小程序的消息通知
5.小程序和公众号能相互跳转
6.小程序的搜索和历史列表
1.1.4 微信小程序不能提供的功能
① 小程序没有集中入口没有应用商店。
② 小程序没有订阅关系。
③ 小程序不能推送消息。
④ 小程序不能做游戏。
1.1.5 微信小程序带来的机会
● 给企业带来机会对于已有App软件的公司提供了新的方式推广产品而对于创业公司来说使用微信小程序可以降低推广产品的成本。
● 给创业者带来机会创业者可以围绕小程序做社区、做应用商店、做微信小程序开发平台、做教育培训及出版书籍等来进行创业。
● 给小程序员带来机会给学生、网站编辑、前端开发人员等想做程序员的人们提供了做小程序员的就业机会。
1.2 微信小程序开发工具的使用
1微信小程序开发文档https://mp.weixin.qq.com/debug/wxadoc/dev/?t2017112
2公众平台申请开发者账号
微信公众平台
3申请一个AppID
访问微信公众平台注册微信公众平台账号选择小程序类型进行注册。注册成功后登录微信公众平台开发者就可以在网站“设置”下的“开发设置”选项卡中查看到微信小程序的AppID不可直接使用服务号或订阅号的AppID。
1.2.3 微信开发者工具的使用
1.编辑功能
微信开发者工具界面可以用于代码编辑、代码调试、项目预览与上传、编译、前后台切换、缓存数据清理及关闭项目。
在硬盘中打开文件的目录可以新建4种文件.js、.json、.wxml和wxss文件对文件进行重新命名、删除和查找操作。
.js文件编辑会帮助开发者补全所有的API并给出相关的注释解释.wxml文件编辑会帮助开发者直接写出相关的标签.json文件编辑会帮助开发者补全相关的配置并给出实时的提示。
注只有保存文件修改内容才会真实地写入硬盘中并触发实时预览。
2.调试功能
小程序的调试工具有Console、Sources、Network、Storage、AppData、wxml。
Console窗口用来显示小程序的输出出错信息和调试代码Sources窗口用于显示当前项目的脚本文件在Sources窗口中开发者看到的文件是经过处理后的脚本文件Network用来观察发送的请求和调用文件的信息Storage窗口用于显示当前项目使用wx.setStorage 或wx.setStorageSync后的数据存储情况AppData窗口用于显示当前项目、当前时刻具体数据实时地反馈项目数据情况。用户可以在此处编辑数据并及时地反馈到界面上Wxml窗口用于帮助开发者开发wxml转换后的界面。在这里可以看到真实的页面结构及结构对应的wxss属性同时可以修改对应wxss属性
3.项目功能
在项目模块中可以看到微信小程序项目的相关信息包括项目名称、AppID、项目文件的路径如果有AppID的项目可以在手机上预览微信小程序将小程序上传
4.编辑功能
编辑对整个项目进行重新编译
5.前台、后台功能
后台是指微信小程序从前台进入后台例如在操作微信小程序过程中突然打进来电话如果接电话这时小程序从前台进入后台重新访问小程序又会从后台进入前台
6.缓存功能
缓存用来清除数据存储、清除文件存储及清除用户授权数据
1.3 微信小程序框架文件
微信小程序框架文件分为三部分框架全局配置文件、工具类文件和框架页面文件。
框架全局配置文件是从项目全局的角度对项目进行配置管理工具类文件对应的是一些常用的js工具处理框架页面文件对应的是微信小程序各个页面。
1.3.1 框架全局配置文件
一个小程序框架配置文件由app.js、app.json和app.wxss 3个文件组成。它们作为全局文件必须放在项目的根目录。
1.app.js小程序逻辑文件
定义全局数据和函数可指定微信小程序的生命周期函数不同阶段不同场景可使用不同的生命周期函数还可以定义一些全局的函数和数据其他页面引用app.js文件后就可以直接使用全局函数和数据。 2.app.json小程序公共设置
全局配置文件可设置5个功能配置页面路径、配置窗口表现、配置标签导航、配置网络超时和配置debug模式 ① 配置页面路径app.json定义一个数组存放多个页面的访问路径页面访问的必要条件
② 配置窗口表现用于配置小程序的状态栏、导航条、标题、窗口背景色可以设置导航条背景色navigationBarBackgroundColor、导航条文字navigationBarTitleText及导航条文字颜色navigationBarTextStyle还可以设置窗口是否支持下拉刷新enablePullDownRefresh默认值是不支持下拉刷新的设置窗口的背景色backgroundColor、下拉背景字体或文本样式backgroundTextStyle
③ 配置标签导航
在app.json中配置tabBar属性。tabBar是一个对象可以配置标签导航文字默认颜色、选中颜色、标签导航背景色及上边框颜色上边框颜色可以配置black、white两种颜色。标签导航存放到list数组中有一个标签导航就在list中配置标签导航list中的每个对象对应一个标签导航每个对象中可以配置标签导航的路径、导航名称、默认图标及选中图标 ④ 配置网络超时可以配置网络请求、文件上传及文件下载时最长的请求时间超过这个时间不再允许请求
⑤ 配置debug模式用于方便微信小程序开发者调试开发程序
3app.wxss小程序公共样式文件
对CSS样式进行扩展使用方式与CSS的一样类选择器和行内样式的写法兼容大部分CSS样式。扩展了CSS样式是针对所有页面定义的一个全局样式。
除了app.wxs提供的默认全局样式用户还可以自行定义一些全局样式。 1.3.2 工具类文件
微信小程序框架目录中有一个utils文件夹用来存放工具类的函数。定义完函数后要通过module.exports将定义的函数名称进行注册这样在其他的页面才可以使用。 1.3.3 框架页面文件
微信小程序的框架页面文件都是放置在pages文件夹下的一个小程序框架页面文件由4个文件组成分别是js页面逻辑、.json页面配置、.wxml页面结构、.wxss页面样式表文件。每个页面都有一个独立的文件夹。 1.4 微信小程序逻辑层
小程序开发框架的逻辑层是用JavaScript编写的。逻辑层将数据进行处理后发送给视图层同时接收视图层的事件反馈。编写过程中在JavaScript的基础上做了一些扩展。逻辑层称为App Service。
1.4.1 APP()注册程序
函数App() 用来注册一个小程序。接收一个object 参数其负责指定小程序的生命周期函数等。
相关的生命周期函数包括
onLaunch监听小程序初始化onShow监听小程序显示onHide监听小程序隐藏onError错误监听函数 App({onLaunch: function() {// Do something initial when launch.},onShow: function() {// Do something when show.},onHide: function() {// Do something when hide.},onError: function(msg) {console.log(msg)},globalData: I am global data})
注意App() 必须在app..js 中注册且不能注册多个不要在定义于App() 内的函数中调用getApp()使用this 就可以获取app实例不要在运行onLaunch 时调用getCurrentPage()此时page 还没有生成通过getApp() 获取实例后不要私自调用生命周期函数。
1.4.2 Page()注册页面
函数Page() 用来注册一个页面。接收一个object 参数其负责指定页面的初始数据、生命周期函数和事件处理函数等。
相关的生命周期函数包括:
onLoad监听页面加载onReady监听页面初次渲染完成状态onShow监听页面显示onHide监听页面隐藏onUnload监听页面卸载 Page({data: {text: This is page data.},onLoad: function(options) {// Do some initialize when page load.},onReady: function() {// Do something when page ready.},onShow: function() {// Do something when page show.},onHide: function() {// Do something when page hide.},onUnload: function() {// Do something when page close.},onPullDownRefresh: function() {// Do something when pull down.},onReachBottom: function() {// Do something when page reach bottom.},onShareAppMessage: function () {// return custom share data when user share.},// Event handler.viewTap: function() {this.setData({text: Set some data for updating view.})},customData: {hi: MINA}})
