传智播客郑州校区分享微信小程序开发入门笔记

 
    近期,传智据微信团队透露，目前微信小程序接入的播客企业和个人开发者达到100万+，第三方平台达2300个,郑州未来将推出开发者教程，让小程序开发门槛更低。校区小程序开所以,分享发入为了让大家进一步了解微信小程序，传智播客郑州校区特意整理了以下小程序开发入门笔记：
 
    一、微信入门前的门笔基础理解和准备
    1. 嵌套在微信里面，即用即走，传智最新发布了微信小程序游戏；
    2. 注册网址——https://mp.weixin.qq.com/；
    注册之后 ：1.可以发布  2.有些功能需要注册才可以用。播客
    3. 数据写在 js里  data里面，郑州类似于vue的校区小程序开数据绑定  { { abc }}；
    （文件格式为wxml——html；样式表单格式为wxss —— css；）
    4. 标签和平时不一样  但是可以类比着看：
    view   div
    image  img
    text   文本
    button  按钮
 
    二、如何写页面和配置
    （一）、分享发入写页面
    1. 在app.json  配置 pages 对应 每一个页面；
    注意：可以直接在app.json里面配置对应的微信页面路径 就自动生成了；
    2. 写在pages里面；
    每一个页面是一个文件夹，文件夹里面应该有  xx.js  xx.wxml  xx.wxss  xx.json；
 
    （二）、门笔配置json
    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
    1. 配置tabBar 底部的传智标签栏 ；
 
    2.  HexColor  这个意思是只能写16进制的颜色，类似#fff000这种；
 
    mvvm  mvc
    M  model数据层；
    V  view 视图层(展示页面)；
    c (vm)  操作数据的（处理数据）；
 
    （三）、普通的js
    dom  bom ecmascript（js语法 if for这些）
 
    （四）、nodejs
    ecmascript（js语法 if for这些） 加操作电脑的  文件操作 系统操作；
 
    （五）微信小程序
    ecmascript（js语法 if for这些）+ 摄像 扫描二维码这些；说白了 就是没有 alert dom操作；
 
    （六）生命周期
    从出生到死亡这个过程
    从页面的初始化到页面的删除这个过程
    小程序
    当某个时间段会去调用对应的函数  说白了就是 调用别人规定好的函数；
 
    1. 小程序的生命周期  app.js 整个小程序
    onLaunch  初始化（一开始触发的函数  只触发一次）
    onShow   当app程序显示到手机屏幕前面 触发 前台
    onHide    当app程序切换到后台
    onError   发生错误的时候触发
     1.1 在app.js里面除了规定好的函数之外还可以写很多
          键值对 这些都是全局的 所有页面都可以使用
    {
    。。。
    abc:123
    }
      1.2 要拿到app.js里面定义的 值或者函数
          需要在你要获取的地方
          const app=getApp();//获取到app对象
          console.log(app.abc)
    2 . 页面的生命周期  单个页面
    onLoad 页面加载但是还没有渲染好  可以提前发送ajax
    onShow 页面渲染显示出来
    onReady  真正的渲染完成
    onHide   页面隐藏
    onUnload  卸载  当前页面已经没有历史记录的时候触发
    1.数据写在 data里面  data可以写数组 对象 字符串 数字 不能写函数
    2. 可以写在界面里面
     类似与script标签
    <wxs module="foo">
    导出东西给别人用
    module.exports={
     add:function(){ }
    }
    </wxs>
    导出一个对象 名字叫foo给别人用  
    使用：foo.add()
    vue
    export default 导出
    import  导入
    nodejs
    module.exports 导出
    require  
 
    条件判断
    wx:if  true的时候创建 false就删除
    wx:else  
 
    hidden=“”  true的时候隐藏（会在页面上只是隐藏了）false显示
    block 标签作用：可以用来包裹住你想判断或者循环的一些标签
    不会影响页面
    传智播客在此提醒大家 ：循环 默认里面有item代表每一项  index代表索引
    <view wx:for="{ { students}}">
    { { item }}
    { { index }}
    </view>
    如果你不想要默认的名字item和index那么可以自定义
    <view wx:for="{ { students}}" wx:for-item="obj" wx:for-index="i">
    { { obj就是每一项 }}
    { { i就是索引}}
    </view>
 
     （七）、小程序单击事件：
    bindtap="add"
    触发的函数写在哪？
    写在对应的js里面  和data 生命周期是同一级
 
    循环的时候必须写
    wx:key="id"  这样可以确保页面的每一个都是唯一的  
    app.json
    pages
    window
    tabBar
    以上是部分针对微信小程序开发入门的基础知识，后续传智播客郑州校区还将分享更多关于微信小程序开发的内容，敬请期待！
 
 
 
 
 
 
 
 
 
 

最新评论