小程序学习

开发工程目录

assets -- 资源文件夹，一般用来放一些图片啥的
pages -- 页面

文件结构

APP

app.js
app.json 小程序的入口 （注意json文件里面不能写注释）

｛//必须有一个值不然会报错，小程序的首页默认是pages里面的第一个值
    "pages":["home" ] 
｝

app.wxss

pages

page.js

Page({ //每个页面的js文件必须有一个页面对象 
 
})

page.json
page.wxml
page.wxss

component 组件 (内置组件 自定义组件)

component.js
component.json
component.wxml
component.wxss

MVVM架构

M：Model -- 逻辑层，保存数据
V：View -- 视图层
VM：ViewModel -- MINA框架担任这一角色，负责链接model和view，充当data bindings，同时也负责监听view的变化，充当dom listeners
前端编程方式：
a.命令式编程
b.声明式编程 -- MVVM架构属于此方式，未来的趋势
＃ 配置小程序
很多开发需求已经被规定在了配置文件中，比如导航栏呀等等
常见的配置文件：
project.config.json：项目配置文件，比如记录项目名称，appid等
sitemap.json：用来写关于微信搜索的配置，可提高小程序曝光率
app.json：全局配置

{  //配置页面路径列表，所有页面必须在这里注册方竜使用
    "pages": [
        "pages/home/home",
        "pages/about/about" 
    ],
    //默认窗口展示
    “window”: [
        "navigationBarBackgroundColor": "#010101",  //设置导航背景颜色
        "navigationBarTextStyle": "black", //设置导航文字颜色，只支持white和black
        "navigationBarTittleText": "我的小程序", //设置导航栏标题
        "backgroundColr": "red", //设置弹簧背景的颜色
        "enablePullDownRefresh": "true",  //允许下拉刷新，下拉漏出来的颜色就是上面设置的颜色
        "backgroundTextStyle": "dark" //设置下拉刷新时的那三个点
    ],
    //底部导航栏
    "tagBar": {
        “selectedColor”: "#ff577",
        "list": [
            {
                "pagePath": "pages/home/home", 
                "text": "text",
                "iconPath": "assets/tabbar/home.png",  //默认图标
                "selectedIconPath": "assets/tabbar/home_active.png"  //选中图标            
            },
            {
                "pagePath": "pages/about/about",
                "text": "about",
                "iconPath": "assets/tabbar/about.png",
                "selectedIconPath": "assets/tabbar/about.png"            
            }
        ]        
 
    }
 
}

page.json：页面配置

{
  //页面设置优先级大于全局设置
  "usingComponents":{}, //自定义组件
  "navigationBarTittleText": "商品分类"  //单独设置页面标题
}

小程序的双线程模式

渲染层
js对象模拟wxml，例如：

<view>
  <view>a</view>
  <view>b</view>
  <view>c</view>
</view>

{
  name:"view",
  children:[
    {name:"view",children:[{text:"a"}]},
    {name:"view",children:[{text:"b"}]},
    {name:"view",children:[{text:"c"}]}
  ]
}

逻辑层
界面渲染流程

注册小程序

注册小程序时一般做的事情:
判断小程序的进入场景（常见打开场景：小程序列表、微信扫一扫、群聊会话、零一个小程序打开）
在某个生命周期函数中获取用户信息传递给服务器保存，获取方式：
1.wx.getUserInfo - 即将废弃的接口
2.button 组件
3.open-data 组件 只能展示用户信息

// button方式获取用户信息
<button open-type='getUserInfo' bindgetuserinfo='handleGetUserInfo'>授权获取<button/>
// open-data 方式展示用户信息
<open-data type="userNickName"></open-data>  //展示用户昵称信息
<open-data type="userAvatarUrl"></open-data> //展示用户头像信息

//wx.getUserInfo方式
wx.getUserInfo({
    success: function(res){
        console.log(res)
    }
})
//button方式对应的js,event里面有用户的信息
handleGetUserInfo(event){
    console.log(event)
}

放置共享数据在App()中

App({
    globalData: {
        name: 'zoner',
        age: '119'
    }
})

注册页面

箭头函数与this的应用

一些图