小程序学习笔记【一】

开发前期准备

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属性：

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 `black` / `white`
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持以下值： `default` 默认样式 `custom` 自定义导航栏，只保留右上角胶囊按钮。参见注2。	微信客户端 6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 `dark` / `light`

快速建页面级文件夹

补全路径即可：

{

"pages": [

"pages/news/news",

]}

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

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

【.js】处理逻辑层

【.wxml】处理视图层

【.wxss】处理样式层

视图标签

视图容器(View Container)：

组件名	说明
view	视图容器
scroll-view	可滚动视图容器
swiper	滑块视图容器

基础内容(Basic Content)：

组件名	说明
icon	图标
text	文字
rich-text	富文本
progress	进度条

表单(Form)：

标签名	说明
button	按钮
checkbox	多项选择器
form	表单
input	输入框
label	标签
picker	列表选择器
picker-view	内嵌列表选择器
radio	单项选择器
slider	滚动选择器
switch	开关选择器
textarea	多行输入框

导航(Navigation)：

组件名	说明
navigator	页面链接
functional-page-navigator	跳转到插件功能页

多媒体(Media)：

组件名	说明
audio	音频
image	图片
video	视频

地图(Map)：

组件名	说明
map	地图

轮播图用法示例：

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

2.创建swiper标签

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

4.为swiper设置属性即可

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

Page({

data: {

indicatordots:true,

autoplay: true

},})

视图：

<swiper-item>

</swiper-item>

<swiper-item>

</swiper-item>

<swiper-item>

</swiper-item>

<swiper-item>

</swiper-item>

</swiper>

</view>

swiper

滑块视图容器。

属性名	类型	默认值	说明	最低版本
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色	1.1.0
indicator-active-color	Color	#000000	当前选中的指示点颜色	1.1.0
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index

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

例：页面同级文件夹的兄弟文件夹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>

<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是文件夹名

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

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

页面跳转：

使用：bindtap='goarc'

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

Page({

goarc: function (event) {

wx.navigateTo({

url: '../archives/archives',

})

},})