01小程序

南工大第一帅哥
145 阅读3分钟

小程序预备知识

image.png

app.json文件是整个文件中最重要的：pages属性中存储我们所有注册过的页面（我们创建好页面后，小程序会自动帮我们注册到app.json中，或者直接在app.json中书写，然后小程序也会帮我们自动创建页面）；而且要在pages文件夹中建立新页面；

并且app.json中的pages有顺序要求，谁在最上方，谁就是第一个被加载的页面，并且默认只会加载一个页面；

image.png

image.png

wxml中存放布局(html)、wxss中存放样式(css)；

在.wxml中用到的样式，小程序会自动去.wxss中查找：

//wxml:这个text标签和span标签类似
<!-- 1.显示普通的文本 -->
<text class="title">我是普通的文本</text>

//wxss
/* pages/favor/favor.wxss */
.title{
  font-size: 20px;
  color:red;
}

在wxml中用到的代码数据，小程序会自动去.js中去查找：并且逻辑代码必须写在Page()函数中，是小程序给我们提供的

// pages/favor/favor.js
Page({
  data:{
    // 数据绑定
    message:'HelloWorld',

    // 列表数据
    movies:['少年派','大话西游','星际穿越']
  }
})

<!--pages/favor/favor.wxml-->
<!-- 1.显示普通的文本，text是一个行内元素，和span类似 -->
<text class="title">我是普通的文本</text>

<!-- 2.动态绑定message属性，view是一个块级元素，独占一行 -->
<view>{{message}}</view>

<!-- 3.动态展示列表数据 -->
<view class='movies'>
  <!-- 准备把{{moview}}也就是movies进行for循环，先体验一下，block就和template标签是一样的 -->
  <block wx:for="{{movies}}" wx:key='item'>
    <view>
      <!-- 默认给我们取得名字就是item以及index -->
      {{item}}--{{index}}
    </view>
  </block>
</view>

事件监听

image.png

在小程序中，button默认是块级元素，独占一行，如果想让他变成行内级元素，需要添加属性：size='mini'

bindtap用来绑定【点击事件】

<view class="counter">
    <view>当前计数：{{counter}}</view>
    <button size="mini" bindtap='increment'>+1</button>
    <button size="mini" bindtap='decrement'>-1</button>
</view>

Page({
    data:{
        counter:0
    },
    
    //监听的事件方法，不用放在methods中
    increment(){
        //这种方式可以修改data数据，但不是响应式的
        this.data.counter += 1
        
        //修改data，并且希望是响应式的，必须使用this.setData()
        this.setData({
            //传入一个对象，指定：哪些数据需要改变
            counter:this.data.counter + 1
        })
    }
    
    decrement(){
        this.setData({
            counter:this.data.counter - 1
        })
    }
})

MVVM架构思想

image.png

小程序的底层双线程模型

宿主环境：就是运行在哪个环境中的

image.png

webView可以理解为：手机端的网页，由他来解析wxml、wxss、js文件等；

webView中也有引擎来处理js文件的，浏览器是由V8引擎、而webView是由webkit引擎，而他的本质是JSCore引擎；

双线程就意味着内存的开销变大

小程序的配置文件

image.png

project.config.json：项目配置文件

developers.weixin.qq.com/miniprogram…

比如说里面有libVersion基础库版本，管理着每个库版本的兼容等等，后面要修改配置的话，很少去修改project.config.json文件，而是在本地设置中进行修改：旁边写着占用率

image.png

image.png

当我们修改后，实际上project.config.json文件没有被修改，而是project.private.config.json被修改了；

可以在 project.config.json 文件中配置公共的配置，在 project.private.config.json 配置个人的配置，可以将 project.private.config.json 写到 .gitignore 避免版本管理的冲突。

所以在project.config.json的时候，是本地配置；团队协作的时候在project.private.config.json；

sitemap.json：小程序搜索相关的

developers.weixin.qq.com/miniprogram…

微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。

image.png

全局app配置文件

image.png

developers.weixin.qq.com/miniprogram…

最常见的3个配置：pages、window、tabBar

举个例子：

//页面.json
{
    //往下拉，就那种刷新的效果
    "enablePullDownRefresh":true
}

image.png

tabBar用来设置底部tab栏：直接写配置就行了，不用我们手动搭建

注意json的格式是：""，并且路径不能写./开头

//app.json
{
    "tabBar":{
        //有一个list属性，是一个数组
        "list":[
            {
                "text":"要展示的文本",
                "pagePath":'点击文本后跳转的页面路径:pages/favor/favor.js',
                "iconPath":"tabBar图片路径",
                "selectedIconPath":"选中后图片效果（高亮）路径"
            },
            {
                ......
            }
        ]
    }
}

页面page配置

image.png

单独修改我每个page的配置：在当前页面.json文件中进行单独配置；

enablePullDownRefresh：下拉刷新配置，在js文件中监听下拉刷新事件：onPullDownRefresh(){...}

avatar
文章
阅读
粉丝