笔记-微信小程序学习

参考：【慕课网】

[TOC]

快速入门

简单介绍

开发文档：http://developers.weixin.qq.com/miniprogram/dev/api/

开发者工具：扫码登录，创建小程序项目(普通快速模版)

app.json说明

代码如下

Code

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

pages开发工具会自动在里面添加项目所有页面

开发开始

初步

新建页面：在pages目录下新建list目录，在list目录下新建page,名字叫list

更改标题：在list.json中添加

Code

{
  "navigationBarTitleText": "区域信息列表"
}

组件介绍：

Code

view：类似于div
scroll-view：可滚动视图区域
text：文本
	 <text>{{text}}</text>
navigator：页面链接，相当于a
button：按钮

后台通过json与页面交互

设置：项目设置>不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

​ 这样http://localhost:8080/sb/hello这种域名才会有效

list.wxml

html

<view>
  <text>数据：{{msg}}</text>
</view>

list.js

javascript

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    wx.request({
      url: 'http://localhost:8080/sb/hello',
      success: function (res) {   
        var mydata = res.data;//json的内容
        console.log(mydata);
        that.setData({ msg: mydata }); //给页面参数{{msg}}注入值
      }
    })
  }
/*
	- url请求返回的是json
	- wx.request的content-type 默认为 'application/json'
	- res.data就在控制台打印出了json串
*/