微信小程序

关于小程序基础

小程序前言
想要开发小程序，必须要先注册一个微信小程序，比如注册一个136邮箱或者，用过的邮箱（比如注册过公众号）就不可以再拿来注册小程序了。

然后需要下载一个微信开发者工具，作为小程序的集成开发环境。

小程序目录结构

配置介绍
一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json
注意：配置文件中不能出现注释

1.1. 全局配置app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。 普通快速启动项目
1.app.json配置基本信息

{

         “pages”:[ //配置目录信息

         “pages/index/index”, //第一条即是程序启动的首页

         “pages/logs/logs”

　　 ],

　　 “window”:{ //窗口样式

         “backgroundTextStyle”:”Light”,

         “navigationBackgroundColor:”#fff”,

         “navigationBarTitleText”:”WeChat”,
                   “navigationBarTextStyle”:”black”

　　},

  　   "tabBar": {  //底部菜单栏配置

　　 “color”:”#333”, //字体颜色

    　 "list": [{

       　　 "pagePath": "pages/index/index",

          　  “iconPath”:”images/icon.png”,

     　　　 "text": "首页"

   　　}, {

    　　    "pagePath": "pages/logs/logs",

    　　    "text": "日志"

  　    }]

 　 },

    "networkTimeout": {  //网络超时配置

    　　"request": 10000,

    　　"downloadFile": 10000

     },

  　　"debug": true

}

/pages/index/index.js 配置页面入口

var app=getApp(); //获取app.js对象

var pageConfig=({

         data:{

         motto:”Hello World”,

         userInfo:{}

},

//事件处理函数

bindViewTap:function(){

         wx.navigateTo({

         url:’../logs/logs’

})

},

onLoad:function(){

         var that=this;

         //调用应用实例方法获取全局数据

         app.getUserInfo(function(){

                   //更新数据

                   that.setData({

                            userInfo:userInfo

   })

　　})

},

testClick:function(){  //绑定一个自定义的方法

         App. getUserInfo()  //调用App中设置的方法

}

})

/pages/index/index.json当前页面配置 //只能配置相关window显示，覆盖app.json中的配置

{

         “backgroundTextStyle”:”dark”,

         “navigationBackgroundColor:”#fff”,

}

视图与渲染
1.快速配置一个页面
①在pages目录下
视图与渲染
1.快速配置一个页面
①在pages目录下新建一个文件firstPage，再创建first.js和first.wxml
②在app.json中配置页面信息

“pages”:[ //配置目录信息

         “pages/index/index”,

         “pages/logs/logs”,

         “pages/first/first”,

]

在first.js中添加Page(); //页面初始化
④在first.wxml中写入需要显示的信息 //页面初始化
2.小程序的标签
①条件标签wx:if，wx:else
②{{data}}双花括号展示数据 //数据来自Page函数中的data

<view class="container">

  <view class="userinfo">

    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>

    <block wx:else>

      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>

      <text class="userinfo-nickname">{{userInfo.nickName}}</text>

    </block>

  </view>

</view>

循环标签wx:for

//第二种写法

     {{ix}} – {{item}}

使用模板 方法一：

1.在pages/目录下，新建页面，如：/templates/header.wxml

2.在其他任意页面使用引入该模板

方法二：

1.在pages/目录下，新建页面，如：/templates/header.wxml
2.在该页面中声明几个带有name的版本标签
< template name=”header1”>这是模板1</ template >

< template name=”header2”>这是模板2</ template >

3.在其他任意页面使用：

     < template is=”footer1” />

动态导入数据到模板：

调用模板页：

     <import src=”../templates/header” />

     < template is=”footer1” data=”{{text:’这是导入的数据信息’}}”/>

模板页：

< template name=”header2”>

       {{text}}

</ template >
小程序的生命周期
1．App.js定义的全局生命周期及方法
App({

onLaunch: function(options) {

//小程序加载的时候

},

onLoad:function(options){

 //数据加载完成

},

onReady:function(){

 //页面渲染完成

},

onShow: function(options) {

  // 小程序前台显示的时候调用

},

onHide: function() {

  // 小程序进入后台运行的时候调用

},

onUnload: function() {

  // 页面被卸载

},

onError: function(msg) {

console.log(msg)

},

userSetF:function(){}, //自定义的全局方法

globalData: {} //全局数据对象

})

2.写在每个页面的Page中则是当前页面的方法和周期
五、页面之间的跳转路由
1.调用方法跳转

         wx.navigateTo({  //当前页面不关闭，打开新页面并跳转

                   url:”../logs/logs?id=100” //传递参数到新页面

})```
2.标签跳转
  <navigator url=” ../logs/logs?id=100” redirect> //设置redirect属性

         <text>点击跳转</text>

         </ navigator >

3.新页面接收传递过来的参数：
         Page({

                     onLoad:function(options){ //在生命周期函数onLoad中参数会接收url传递过来的数据

                        console.log(options)

},

})


请求服务器数据
wx.request({
         url:””,
         data:{},
         header:{ //请求头信息
                   ‘Content-Type’:’application/json’
},
         success:function(res){},
         fail:function(res){}
})