VIP 视频更新:微信小程序基础视频

视频说明:

微信小程序是嵌套在微信的一套应用程序, 它可以微信内获取和传播。本教程旨在快速的帮你了解小程序框架内的规则, 理清小程序框架的脉络.

适用人群(学前要求):

  1. 1、具备 css html 以及原生 js 的基础
  2. 2ECMAScript6
  3. 3DOM+BOM+EVENT

视频大纲:

  1. 1集内容讲解:课程介绍
  2. 1、小程序开发介绍
  3. 2、介绍学前基础要求
  4. 2集内容讲解:开发前准备
  5. 1、申请开发者账号
  6. 2、安装开发者工具
  7. 3AppID的获取方法
  8. 4、开发者工具界面功能分析
  9. 5、总结开发前需要做的准备
  10. 3集内容讲解:文件和目录结构
  11. 1、通过编辑器打开代码文件
  12. 2、介绍小程序主体启动代码的三个文件:app.js \ appjson \ app.wxss
  13. 3、介绍小程序4个页面:index.js \ index.wxml \ index.wxss \ index.json
  14. 4、总结
  15. 4集内容讲解:程序页面配置
  16. 1app.json index.json 的程序配置
  17. 2pages 页面路径配置
  18. 3、讲解 window 配置
  19. 4、讲解 networkTimeout 配置
  20. 5、讲解 debug 模式设置
  21. 5集内容讲解:tabBar 配置
  22. 1、介绍 tabBar 是什么东西
  23. 2tabBar 通用配置介绍
  24. 3tabBar list 字段讲解
  25. 4、通过三个页面为例,讲解 tabBar 具体写法
  26. 6集内容讲解:注册程序和页面
  27. 1、注册程序使用App-注册完成会得到一个程序的实例,可以被其他页面访问
  28. 2、注册页面使用Page - 每个页面都需要注册 Page,配置页面实例
  29. 3、总结:在App.js里面的一些函数,它无论如何都会执行,在页面里面的函数,在进入该页面的时候,会执行该页面的函数,如果没有进入某个页面,那么这个页面的函数就不会执行。这些函数就是生命周期的函数。
  30. 7集内容讲解:程序(App)生命周期
  31. 1onLaunch:会在小程序启动/初始化时,就会执行
  32. 2onShow:每次在后台切换到小程序时,就会执行
  33. 3onHide:小程序被切换到后台运行时,就会执行
  34. 8集内容讲解:页面(Page)生命周期
  35. 1onLoad:页面加载的时候执行,只会执行一次
  36. 2onReady:页面第一次渲染完成之后,只执行一次
  37. 3onShow:只要页面显示就会执行,会执行多次
  38. 4onHide:只要页面隐藏就会执行,会执行多次
  39. 5onUnload:页面卸载的时候执行,只执行一次
  40. 6、在tab 之间切换,不会让页面重新加载,不会卸载,只会隐藏或显示;
  41. 7、在进行 NavigatorTo(跳转),跳转到的那个目标页面,会被加载
  42. (load),跳转之前的页面会被隐藏;NavigatorBack(回退)目标页面会执行
  43. (show),回退之前的页面会被卸载(unload).
  44. 9集内容讲解:数据和列表渲染
  45. 1、页面渲染的数据包括:字符串,运算、对象、数组
  46. 2、通过Page页面的data字段,可以定义数据,它可以是任意的数据类
  47. (字符串、数字、布尔值、对象)
  48. 3、定义一个数组,举例实现渲染列表
  49. 4、渲染时,控制台会警告,建议配置 wx:key 值,是为了应对以后在渲染
  50. 比较的时候能够辅助让它在性能上有所提升,要保证在本次渲染列表中,它
  51. key 值是唯一的
  52. 10集内容讲解:条件渲染与block
  53. 1、通过学生分数实例,讲解如何进行条件渲染。
  54. 2、渲染平级,需要通过虚拟组件(block
  55. 3block 不单可以渲染平级,还可以渲染其他东西,如字符串、列表...
  56. 4、总结:关于页面渲染,我们讲了关于数据绑定、如何对列表进行渲染、条件渲染
  57. 11集内容讲解:模板使用
  58. 1、重复需要写的结构,可以写在模板里;
  59. 2、在 wxml 里申明模板
  60. 3、新建 template.wxml文件,定义的模板都可以统一申明
  61. template.wxml 里面
  62. 4、模板引用语法: import include
  63. 12集内容讲解:事件
  64. 1、通用事件列表 - 以经典的 tap 为例进行简单的事件交互
  65. 2、讲解事件打印出来的信息,不同组件会提供不同的信息。
  66. 3、小程序 - 事件冒泡
  67. 4、小程序 - 阻止事件冒泡(catch
  68. 13集内容讲解:小程序 - 样式
  69. 1、介绍小程序的样式语言:wxss
  70. 2、小程序的wxss和页面的css的区别:
  71. 3、小程序 wxss 的尺寸单位:rpx
  72. 4、小程序样式语言 wxss 支持的选择器:.class\#id\element\elementelement\:after\:before
  73. 5、小程序 - 全局样式与局部样式
  74. 6、总结:怎么在小程序里面写wxss;它跟css有什么样的不同;wxss多了一个尺寸单位:rpx;如何引入,有一个全局的样式和一个局部样式,以及支持哪些选择器;
  75. 14集内容讲解:wxs 辅助渲染
  76. 1wxs 是小程序的一套脚本语言,提供页面辅助渲染;
  77. 2wxs 的使用
  78. 3、除了可以在wxml文件内写<wxs></wxs>标签,还可以把代码写在新建单独的 .wxs 文件,
  79. 4、.wxs 文件的使用
  80. 15集内容讲解:更新页面
  81. 1setData 更新数据与页面
  82. 2、通过 setData 接口更新数据
  83. 3、页面更新和数据更新是异步更新的过程
  84. 4、举例实现数据同步变化过程
  85. 5、总结:通过 this.setData 来改变页面,促进页面更新,改变 data 数据。data在改变的时候,数据是同步更新的。但是data变化并不意味着我们的界面就会马上更新,因为界面的更新是一个异步的过程。
  86. 16集内容讲解:组件
  87. 1、小程序的页面是由一个一个组件拼凑成的;
  88. 2、组件共有属性:
  89. class
  90. id
  91. style
  92. data-name
  93. bind:tab
  94. hidden
  95. 3、组件也会有自己独有的属性
  96. 例如<progress>进度条</progress> 的独有属性percent
  97. 4、其他组件可在小程序后台管理界面文档自行尝试实现
  98. 5、介绍课下学习小程序
  99. 17集内容讲解:自定义组件
  100. 1、申明组件
  101. 需要新建文件夹
  102. magicNumber
  103. 组件结构-新建文件
  104. mnum.js
  105. mnum.json
  106. mnum.wxss
  107. mnum.wxml
  108. 2、注册组件,使用Component 注册组件,
  109. 3、配置组件,在 .json 文件中配置组件
  110. 18集内容讲解:自定义组件事件和属性
  111. 1、自定义组件的回调函数
  112. 2、自定义组件事件
  113. bind:getMagicNumber
  114. 3、给自定义组件绑定自定义属性
  115. 4、自定义属性的使用
  116. 19集内容讲解:路由
  117. 1、导航组件:navigator
  118. 2、导航组件指定 url 地址(跳转页面)
  119. 3、导航跳转方式(open-type)
  120. 1)跳转到(navigate
  121. 2)重定向(redirect
  122. 3)跳到某个tab(switchTab)
  123. 4)回退(navigateBack)
  124. 5)重加载(reLaunch)
  125. 4、导航组件:API
  126. 跳转到 wx.navigataTO(OBJECT)
  127. 重定向 wx.redirect(OBJECT)
  128. 跳到某个tab wx.switchTab(OBJECT)
  129. 回退 wx.navigateBack(OBJECT)
  130. 重加载 wx.reLaunch(OBJECT)
  131. 5、总结:在微信小程序里面,可以通过 navigator 组件进行导航,并讲了5种导航方式,另外还可以使用API进行导航
  132. 20集内容讲解:授权与用户信息授权
  133. 1、授权相关 API
  134. 1)用户信息授权(button
  135. 需要用户操作
  136. 2)其他信息授权
  137. wx.authorize(OBJECT)先授权,直接获取信息
  138. 未授权会先进行授权
  139. 2、用户信息授权相关流程和操作
  140. 21集内容讲解:其他授权与授权设置面板
  141. 1、举例用户位置授权
  142. 1)用户拒绝授权
  143. 2)用户同意授权
  144. 2、通过调用wx.authorze来进行授权,它只是进行授权并不会得到授权后的信息,需要调用其授权相应的api,如果未进行授权就直接获取某些信息,例如:位置,就会提供一个授权弹框。
  145. 3、授权相关信息
  146. 4、打开授权设置面板
  147. 22集内容讲解:使用缓存
  148. 1、增加按钮-缓存数据
  149. 2、异步缓存数据(wx.setStorage
  150. key
  151. data
  152. 回调函数(success
  153. 3、同步缓存数据(wx.setStorageSync
  154. 4、缓存的设置、获取、移除
  155. 23集内容讲解:请求和反馈
  156. 1、介绍小程序后台运行代码
  157. serve-demo
  158. 2wx.request 接口
  159. url地址
  160. 3、微信提供的界面交互反馈API
  161. wx.showToast
  162. wx.showLoading
  163. wx.hideLoading
  164. 4、介绍后台接口内容是由钟毅录制
  165. 24集内容讲解:腾讯云服务器配置-nodejs版本
  166. 1、微信小程序线上环境搭建
  167. 2、本地环境
  168. 3、配置 nodejs 后端
  169. 自己的服务器
  170. 第三方托管服务器
  171. 阿里云
  172. 百度云
  173. 腾讯云
  174. 4、开发环境管理
  175. 管理账号
  176. 组织并上传代码 - nodejs版本
  177. 上传代码到腾讯云- nodejs版本
  178. 25集内容讲解:腾讯云服务器配置-php版本与数据库配置
  179. 1、上传代码到腾讯云- php版本
  180. 2、上传代码到腾讯云- 数据库
  181. 数据库搭建
  182. 数据库登录
  183. 数据库表结构和数据录入

视频地址:

https://study.miaov.com/study/show/chapter/453

正所谓学无止境。如果你已经完成本套视频学习,你可以继续研究更深入的知识


尊享视频推荐:《微信小程序实战-美团点评核心功能实现》

这是一套你们必须了解的微信 “小程序” 实战开发全套视频。在微信 “小程序” 发展如日中天的当下,掌握 “小程序” 开发能力,已是必备技能。本套视频会以 “大众点评” 的业务逻辑为原型,带领大家从 “小程序” 的布局开始,到业务逻辑、功能实现,再到真实数据接口、数据交互,课程中会进行多方面能力的训练,如:前后端数据交互逻辑、授权流程、视图交互、组件与 API 的使用技巧、腾讯位置服务等等,本套课程所有核心功能统统囊括,技能提升不留死角 …

案例截图(布局篇):

案例截图(业务逻辑):

学习地址:

https://study.miaov.com/study/remote/chapter/457

不清楚自己是否具备学前要求?不如测一测吧,扫描二维码做一下学前测试:


进群方式:关注公众号,发送 “vip进群” 关键字,联系我们加入 VIP 微信学习群

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号