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

时间:2024-09-18 22:23:45 来源:p一张抑郁症检查单(微:7862262)
 
    近期,传智据微信团队透露,目前微信小程序接入的播客企业和个人开发者达到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
    以上是部分针对微信小程序开发入门的基础知识,后续传智播客郑州校区还将分享更多关于微信小程序开发的内容,敬请期待!
 
 
 
 
 
 
 
 
 
 
推荐内容