微信小程序开发入门

项目文件夹结构说明

页面javascript代码规则讲解

//Page()表示创建一个小程序页面对象，代码从这个对象开始着手
Page({
    //data对象里存放特殊变量，这个变量可以在wxml文件里使用
    data:{
        变量1: "测试"  //在wxml文件里就写 {{ 变量1 }} ，可以把变量的值显示在页面中直接看见
    },
    
    //Page里的这些特殊的函数会根据条件自动触发
    onLoad(){
        //当页面被创建时触发。大部分代码一般都是写在这里
    },
    onReady(){
        //当页面初始渲染成功时触发
    },
    onHide(){
        //当页面切换到后台时触发（例如按手机HOME键回到了桌面）
    },
    onShow(){
        //当返回当前页面时触发
    },
    onUnload(){
        //当页面卸载时触发（例如从当前页面跳转到另一个页面）
    },
    onPullDownRefresh(){
        //当下拉刷新时触发。注意下拉刷新这个操作默认是不允许的
    },
    onReachBottom(){
        //当滑动到底部时触发
    }
    
    //wxml文件里的节点的bindtap（绑定点击事件函数）就是定义在这里的
    testFunction(e){
        var 自定义属性 = e.target.dataset.自定义属性;
        //e是触发事件的类型、target是触发事件的节点、dataset是节点的所有属性
        
        this.setData({变量:值})  //给Page.data里的变量赋值，注意只能用这个方法赋值，用等号赋值是没用的
        
        //关闭当前页面，并跳转到指定页面，可以顺便传递参数到想跳转的页面，然后在那个页面的onload里接收参数
        wx.redirectTo({url:"/pages/page2/page2?id=9"});
        //不关闭当前页面，跳转到指定页面，可以顺便传递参数到想跳转的页面，然后在那个页面的onload里接收参数
        wx.navigateTo({url:"/pages/page2/page2?id=9"});
        //要跳转到tabbar页面只能用wx.switchTab
        wx.switchTab({url:""})
    },
})

页面wxml代码规则讲解

• wxml类似于html。不同于html的是每个标签必须要写结束标记/
• page-meta 该页面的总属性配置的特殊节点。必须是页面中第一个节点。
  scroll-top 可以设置画面滚动到什么位置
  bindscrolldone 如果通过改变scroll-top属性来使页面滚动，页面滚动结束后会触发scrolldone事件
  bindscroll 页面滚动时会触发事件。event.detail = { scrollTop }
  page-orientation 可以设置页面的方向可为 auto portrait 或 landscape
• text 相当于p标签，行内元素，有个selectable属性可以设置可不可以选中复制，有个decode属性可以设置是否转换（例如?会转成空格）
• rich-text 富文本，就是可以渲染HTML代码的容器
• view 相当于div标签，块级元素
• scroll-view 可滑动的view容器
• movable-area 可以移动、缩放的view容器
• movable-view 可以移动的view容器，必须时movable-area的子节点
• swiper 滑块视图容器
• image 相当于img标签
• icon 微信提供的一些小图片小图标
• button 按钮
• wxml标签的一些通用属性
  bindtap //绑定点击事件函数，注意只能写函数名而不能传参
  catchtap //点击事件函数，会阻止事件冒泡传递到父元素
  data-id //自定义属性，可以在点击事件函数里用e.target.dataset.id获取

wxss代码

• 和css类似
• 不同于css，wxss有一个新的单位rpx响应式像素，会根据屏幕分辨率自适应，开发iphone6时 1rpx = 1物理像素
• 引入外部样式
  @import “…/…/style/common.wxss” 一定要用相对路径
• 有很多的第三方样式库：Vant Weapp、WeUI、LinUI、ColorUI

app.json

{   
    //在这里注册小程序的页面，进小程序默认显示第一个
    "pages":[
        "pages/page1/page1",
        "pages/page2/page2"
    ],

    "window":{
        "backgroundColor":"#F6F6F6",    //背景颜色
        "backgroundTextStyle":"light",    //背景文字的样式
        "navigationBarBackgroundColor":"#F6F6F6",    //导航条的背景颜色
        "navigationBarTitleText":"云开发",    //导航条的文字
        "navigationBarTextStyle":"black"    //导航条的文字样式
        "enablePullDownRefresh": true  //将下拉刷新效果设置为可用
    },

    //底部导航栏
    "tabBar":{
        "color":"#ddd",    //没选中时，按钮上的文字的颜色
        "selectedColor":"#F00",    //选中时，按钮上的文字的颜色

        //list里面每一个对象就是一个导航按钮tabbar
        "list":[{
            "pagePath":"",    //点击按钮后跳转到的组件名称
            "text":"",    //按钮上的文字
            "iconPath":"",    //默认显示的图标，必须是本地图片
            "selectedIconPath":""    //选中时显示的图标，必须是本地图片
        }]
    },

    //开启weui扩展库
    "useExtendedLib": {
        "weui": true
    },
    //配置自定义组件
	"usingComponents": {
        "mp-tabbar": "weui-miniprogram/tabbar/tabbar",
    	"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
    },

    "sitemapLocation":"sitemap.json"
}