小程序学习笔记【一】

开发前期准备

1. 进入注册小程序账号

​​https://mp.weixin.qq.com/wxopen/waregister?action=step1​​

2. 可在此处获取appid

3.在此处下载开发工具

小程序配置 app.json文件

pages里放页面路径列表，最上面的打开默认显示；

window里配置窗口样式；

​​tabBar​​：底部 ​​tab​​ 栏的表现；

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
}复制代码

window属性：

快速建页面级文件夹

补全路径即可：

{

"pages": [

"pages/news/news",

]}

会生成一个这样的页面级文件夹

ps：如果自己建文件，那么这四个文件名必须一致

【.js】处理逻辑层

【.wxml】处理视图层

【.wxss】处理样式层

视图标签

视图容器(View Container)：

基础内容(Basic Content)：

表单(Form)：

导航(Navigation)：

多媒体(Media)：

地图(Map)：

轮播图用法示例：

1.创建一个class为idol-community的view容器

2.创建swiper标签

3.一个swiper-item标签里面放一个image标签

4.为swiper设置属性即可

5.在当前js文件中设置：

Page({

data: {

indicatordots:true,

autoplay: true

},})

视图：

 <view class='idol-community'>

      <swiper   indicator-dots='{{indicatordots}}'   autoplay='{{autoplay}}'   >

            <swiper-item>

                 <image src='../../images/1.jpg'></image>

            </swiper-item>

            <swiper-item>

                 <image src='../../images/2.jpg'></image>

            </swiper-item>

            <swiper-item>

                 <image src='../../images/3.jpg'></image>

            </swiper-item>

            <swiper-item>

                 <image src='../../images/4.jpg'></image>

            </swiper-item>

   </swiper>

</view>

swiper

滑块视图容器。

动态将其他文件中的数据遍历展示在视图中：

例：页面同级文件夹的兄弟文件夹data，中的newsdata.js数据文件

newsdata.js中的内容：一条条的数组

在newsdata.js页面将数组导出：

module.exports = {

newsData: newsData

}

在要接收的js页面将数据接收：

 onLoad: function (options) {

    this.setData({

         newsData: newsData.newsData

})

}

1.用block标签将要遍历的视图板块包裹：

2.wx:for="{{newsData}}"   for循环newsData这个数组     wx:for-item="item"    起名为item

3.可直接这样使用  <text>{{item.authorname}}</text>

 <block wx:for="{{newsData}}"   wx:for-item="item"    wx:key="key">

      <text>{{item.authorname}}</text>

 </block>

将页面视图板块 提取为组件：

例 1.在页面级文件夹archives下创建文件夹archives-template作为页面组件文件夹

2.文件夹下创建wxml和wxss视图和样式文件

3.在wxml视图文件下创建template模板标签，存放原视图

给模板标签起一个name

4.原视图区域则存放：

用is：name名引进模板    动态获取的data文件则用...item表示

5.模板内的数据展示也不用再用

<text>{{item.authorname}}</text>

而是直接

<text>{{uthorname}}</text>

6.在页面级wxml页面开头引入模板页面：

第一个archives-template是文件夹名

<import   src='archives-template/archives-template.wxml'/>

7.在页面级wxss页面开头引入模板样式：

@import "archives-template/archives-template.wxss";

页面跳转：

使用 ：bindtap='goarc'

<text class='meet' bindtap='goarc'>遇见</text>

在本页面js文件里：goarc函数

Page({

  goarc: function (event) {

        wx.navigateTo({

        url: '../archives/archives',

})

},})