阅读 47

前端微信小程序入门(一)

准备事项

1:去mp.weixin.qq.com/ 注册,注册成功才能开发微信小程序

2:下载 “微信开发着工具” 这是开发工具

3:填写小程序的基本信息 ,获取AppID(小程序ID)

4:developers.weixin.qq.com/miniprogram… 这是开发文档网址

小程序基础

目录结构

    1.根目录下有:
    app.js          小程序逻辑
    app.json        小程序公共配置
    app.wxss        小程序公共样式表
    根目录下有一个文件夹
    2.pages文件夹 :这个文件夹中放当前小程序中所有的页面
    每个页面的格式都是一致的:
        都有一个文件夹,文件夹中有4个文件
        xx.wxml     页面结构            必须
        xx.js       页面的业务逻辑      必须
        xx.json     当前页面的配置      可选
        xx.wxss     当前页面的css样式   可选
    3.其他数据建议放在根目录下,有自己文件夹
        比如:想有一个放图片的地方,可以在根目录下创建images文件夹
        比如:想有一个放静态数据的地方,可以在根目录下创建一个data文件夹
复制代码

app.json

    1.作用:小程序公共配置
    2.这个配置文件夹中可以有如下可选项
        {
            "pages":[       // 页面路径
                "pages/index/index", 
                "pages/about/about"                   
            ]
            // 注意:1.页面路径的后缀不要加,只写文件名
            // 2.最后一个页面路径后,一定不要加",",否则报错
            // 3.pages数组中的第一个元素项是小程序进入时显示的第一个页面
            ,
            "window":{
                "navigationBarBackgroundColor":"#000",
                "navigationBarTextStyle":black/white,
                "navigationBarTitleText":"标题",
                "backgroundColor":"背景颜色",
                "backgroundTextStyle":"black/white",
                "enablePullDownRefresh":true,
                "onReachBottomDistance":number,
                "pageOrientation"
            },
            "tabBar":{
                "color":"HexColor", //tab 上的文字默认颜色
                "selectedColor":"HexColor",
                "backgroundColor":"HexColor",
                "borderStyle":"black/white",  //tabBar上面得一个横条
                "position":"bottom/top"
                "list":[{
                    "pagePath":"",页面路径
                    "text":"", 提示文字
                    "iconPath":"图标路径",
                    "selectedIconPath":"被选中时图片路径"
                },{
                    
                }]    
            }
            // 说明:1.list只能配置最少 2 个、最多 5 个 tab
            // 2.每一个tabBar元素项有4个属性
            // 3.tabBar默认放在页面底部,如果放到页面顶部,图标会自动隐藏起来。
        }
复制代码

app.js

  1.说明:每个小程序有且仅有一个,作用是定义整个小程序的逻辑。生命周期回调函数、页面不存在的函数、页面错误的函数、全局数据
    2.配置
        App({
            onLaunch (options) {
                // Do something initial when launch.
            },
            onShow (options) {
                // Do something when show.
            },
            onHide () {
                // Do something when hide.
            },
            onError (msg) {
                console.log(msg)
            },
            onPageNotFound(){

            }
            globalData: {}
        })
        生命周期函数:onLaunch,onShow,onHide
          解释:生命周期函数,当小程序创建后,会自动执行的一些函数。在运行的不同阶段会被自动触发执行。
        onLaunch:只会被触发一次,在刚进入小程序时触发,对小程序初始化
        onShow:当小程序从后台进入到前台时触发
        onHide:小程序隐藏时触发

        globalData:是全局数据,可以在任何页面中被访问到
复制代码

app.wxss

        1.作用:定义全局css样式
        2.尺寸单位:
             rpx:可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx。
             iphone下面常见的视口大小: 
             iphone 5:320px  
             iphone 6/7/8:375px  
             iphone 6/7/8 plus: 414px
        3.样式导入
            可以导入外部写好css样式
            @import '外部css路径'
        4.小程序建议使用弹性盒布局
            弹性盒布局:
                display:flex;
复制代码
      app.wxss中定义的样式  是全局的。
复制代码

xx.wxml


        1.说明:定义页面结构的。
        2.微信中定义了一套新的标签,使用时最好使用微信定义的,不要使用div+p+span
            视图容器:view  块级元素  相当于div
                    swiper  轮播图元素  直接用,就不用引swiper.js了
                    scroll-view 可滚动视图区域
            基本内容:text  文本标签  相当于  span
            表单:Input
                 单选、多选、下拉框、文本域
                 日历、switch
            导航:navigator 相当于a标签,可以实现页面跳转
            媒体:image,audio,video
            地图:map
            画布:canvas
        3.能绑定一些语法
            1.数据绑定:{{}}
            2.条件选择:wx:if = "条件" 相当于  if()
                        wx:elif       相当于  else if()
                        wx:else        相当于 else
            3.列表渲染:wx:for="{{array数组名}}"
                有两个默认的键名:
                    item    循环的键值
                    index   循环下标
                修改默认键名:
                    修改item,  wx:for-item = 'value'
                    修改index下标, wx:for-index = '新值'
                遍历时需要添加 wx:key='值',保证遍历每一个元素都是唯一的,防止报错。
            4.绑定事件
                点击事件: tap   相当于  click,没有双击事件
                触摸事件:touchstart  手指触摸动作开始
                         touchmove  手指触摸后 移动
                         touchend   手指触摸 结束
                长按事件:longpress
                css3动画事件:transitionend
                             animationstart
                             animationend
                绑定事件:
                    允许事件冒泡: bind+事件
                    不允许事件冒泡:catch+事件
                举例:<view bindtap="事件函数||表达式"></view>
                注意:1.事件绑定是写在标签中,一般事件会指定一个事件函数或者一个表达式。
                     2.如果是事件函数,事件函数需要定义在对应页面的js中
            5.事件对象
                事件函数中有一个默认的参数event,就是事件对象
复制代码

xx.js

     1.说明:定义当前页面的业务逻辑
        2.配置
            Page({
                data:{},                
                onLoad:function(){},
                demo:function(){}
            })
            说明:1.data:当前页面的数据
                 2.生命周期函数,只是针对当前页面在运行过程中会自动触发的一些函数
                   onLoad   当页面加载完成时自动执行
                   onShow   当页面显示时执行
                   onHide   当页面隐藏时执行
                   onReady  当页面准备好时执行
                   onUnload 当页面卸载时执行
                 3.还可以定义自己需要的函数,以及功能函数,如demo
                    onPullDownRefresh   下拉刷新
                    onReachBottom       上啦加载更多
        3.修改数据方法
            this.setData({
                key:value,
                key:value
            })
            this 指的是当前xx.js 大对象
            this.data.key 访问data中的数据
复制代码

xx.json

        1.说明:只能修改当前页面的导航条样式、标题及样式
        2.配置
            {
                "navigationBarBackgroundColor":"#000",
                "navigationBarTextStyle":black/white,
                "navigationBarTitleText":"标题",
                "backgroundColor":"背景颜色",
                "backgroundTextStyle":"black/white",
                "enablePullDownRefresh":true,
                "onReachBottomDistance":number,
                "pageOrientation"
            }
复制代码

xx.wxss

        1.说明:写当前页面的css样式
        2.写法和正常css写法一样
            注意:rpx
                 @import
                 建议使用弹性盒布局
复制代码

路由

        1.作用:切换页面
        2.定义方式:
            1.标签形式:<navigator />
              使用方法:
                <navigator url='路径' open-type='跳转方式' />
                url:要跳转的路径
                open-type:navigate  打开新页面,不能打开tabBar页面
                          redirect  路由重定向
                          switchTab 打开tabBar页面
                          reLaunch  重启
                          navigateBack 后退
                          exit      退出小程序 

            2.代码形式:
                打开新页面:wx.navigateTo({
                    url:'路径'
                })
                路由重定向:wx.redirectTo({
                    url:'路径'
                })
                打开tabBar页面: wx.switchTab({
                    url:'路径'
                })
                重启: wx.reLaunch({
                    url:''
                })
                后退: wx.navigateBack({
                    url:''
                })
    
    
复制代码
文章分类
前端
文章标签