美文网首页
微信小程序开发

微信小程序开发

作者: KongWish | 来源:发表于2020-09-11 21:49 被阅读0次

    原生框架目录结构

    pages文件夹中就是小程序的页面

    app.js是项目的入口文件、全局文件

    app.json文件是配置文件

    wxss样式文件、sitemap只有在发布的时候使用,判断该页面是否能被微信索引

    小程序配置文件

    全局配置文件app.json:pages、window、tabBar导航栏

    页面配置page.json:为每一个页面配置window里面的内容

    模板语法

    <text>标签相当于<span>标签,行内元素,不会换行

    <view>标签相当于<div>标签,块内元素,会换行

    数据绑定

    用{{id}}完成数据绑定,这里很像vue,在data中定义数据或者对象

    循环 wx:for 条件渲染 wx:if wx:elif 

    hidden:在标签上直接加入属性hidden

    block标签:占位符一样的标签,在写代码时能看到标签存在,然而在页面渲染时,小程序会把它移除掉

    事件绑定:在input标签中加入bindinput属性,bindinput可以绑定一个事件,通过e.detail.value来获取事件源对象的值,小程序中如何将值赋给data:this.setData({ num: e.detail.value })

    点击事件,bindtap,但无法在小程序的事件中直接传参,需要自定义属性的方式来传递参数,在标签中定义data-operation的值即可

    样式rpx:calc( 750rpx * 100 / page)

    引入,@import "相对路径"

    swiper 轮播图 

    swiper-item 轮播项 默认:height:150px image 存在默认宽度和高度,320*240 。在swiper标签中加入autoplay属性

    navigator导航栏

    navigator默认会换行,块级元素;url:跳转到的页面路径;target可以选择跳转到自己的小程序还是跳转到其他的小程序中,默认self / miniProgram其他小程序页面;open-type:跳转的方式

    rich-text富文本标签

    button标签

    type;size;

    开放能力:open-type:

    icon标签

    radio标签

    radio必须和父元素radio-group来使用,给radio-group绑定bindchange事件

    checkbox复选框

    自定义组件

    先新增组件,在页面js文件中,存放事件回调函数的时候,我们是存放在data同层级下的,但在组件的js文件中,存放事件回调函数必须要存放在methods当中

    父向子传递数据、子向父传递数据

    本节尤为重要,其他加强对这节的学习。

    小程序的生命周期

    项目

    图标可以用阿里的图标库,将需要的图标添加到需要的项目中,然后生成iconfont class的代码,将代码输入网址并将内容复制到styles文件中的wxss文件中,并在app.wxss中全局导入。

    搜索框

    用到了自定义组件,因为在多个地方都会用到搜索框

    轮播图

    这里要调用服务器接口,将轮播图的图片信息导入到image标签中,这里用到了wx-request方法,但是如果就是在page中页面中直接发起request请求的话,之后如果需要嵌套请求或者其他操作的话,可能会报错,所以在这里我们需要在目录文件request中定义一个index.js文件,通过promise来解决这个问题。

    导航和楼层

    类似轮播图,也是向服务器请求数据,但是这两部分对于wxss部分的知识要求比较高,还是需要了解一下wxss方面的知识。4

    分类页面

    这里要显示滚动菜单,于是我们可以用到scroll-view标签

    相关文章

      网友评论

          本文标题:微信小程序开发

          本文链接:https://www.haomeiwen.com/subject/ununjktx.html