微信小程序基本知识_01

1. 页面构成

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

页面统一放在 pages 文件夹下

每一个页面里面包含了 wxml、wxss、json（配置文件）、js，如图：

2. 在 app.json 里面进行全局的配置

2.1 注册页面：一般情况在 json 文件里配置之后，编辑器会自动创建对应的文件

编辑器下载：微信开发者工具下载地址与更新日志 | 微信开放文档

"pages": [
    "pages/home/home",
    "pages/cate/cate",
    "pages/discont/discont",
    "pages/cart/cart",
    "pages/mine/mine",
    "unpackage/good_detail/good_detail"
  ],

2.2 样式

navigationBarTextStyle	上方导航文字颜色
navigationBarTitleText	上方导航文字内容
navigationBarBackgroundColor	上方导航的背景色
backgroundColor	页面背景颜色，在下拉刷新之后才能看见

 "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "商城项目",
    "navigationBarBackgroundColor": "#1296db",
    "backgroundColor": "#F8F8F8"
  },

2.3 底部导航条

 配置：

"tabBar": {
    "selectedColor": "#1296db", // 选择当前项的文字颜色
    "color": "#656565", // 默认的文字颜色
    "list": [ // 数组
      {
        "pagePath": "pages/home/home",
        "text": "主页",
        "iconPath": "static/tabbar_icon/home.png", // 图标路径
        "selectedIconPath": "static/tabbar_icon/home_selected.png" // 被选中后的图标
      },
      ...
    ]
  },

3.其他

~父子组件传值： name=“{{name}}”,只有刷新onLoad()页面，父级元素才会重新传值,即使父元素获取了最新的store数据，但是页面不刷新也不会传递给自元素

~获取页面：getCurrentPages() ; const perpage = pages[pages.length - 1];

~重新加载页面的方法： page.onLoad()

~轮播图-swiper:

自动播放	autoplay=“ true”    ( false )
指示点dot	Indicator-dot=“true” ( false )
衔接性轮播	circular=“true”   ( false )

~图片-image： 

src	路径 path   /public/url
mode	填满元素：scaleToFill
mode	长边显示： aspectFit
mode	短边显示： aspectFill

~Button 

plain	是否镂空，是就背景无效
bindtap	绑定点击事件
catchtap	阻止冒泡

~本地存储：

wx.setStorageSync(‘key’,data)	存储
wx.getStorageSync(‘key’)	获取

~模版语法

{{   }}	使用双花括号显示值
Wx:for = “{{data}}”	循坏渲染也是
循环渲染	在 item 里面展示，item.name

~修改数据的方法： this.setData({‘data.key’ : value})

~开启下拉刷新的功能 ： app.json.window.enablePullDownRefresh : true

---

自定义组件

`在需要使用组件的page 里的 json 文件设置 “usingComponent “:{“name”:”path”}

`组件内部数据保存在： properties: {} 里，可通过父组件里自定义组件传递

`组件内部方法定义在 methods 里面

`组件样式问题： 最好使用 class 选择器，这样就有样式分离

Store Mobx 使用:

引入	npm install --save mobx-miniprogram mobx-miniprogram-bindings
导入	Import { createStoreBIndings} from “mobx-minprogram-bindings”
使用	this.StoreBIndings = createStoreBIndings({ store,fields: [’string’  ], actions: [’string’]})

在 store.js 里	import {
	observable,
	action
	} from 'mobx-miniprogram'

1. text-overflow: ellipsis;// 显示省略符号来代表被修剪的文本
2. white-space: nowrap; //文本不会换行，文本会在在同一行上继续，直到遇到标签为止
3. overflow: hidden;// 超出部分隐藏