微信小程序入门

小程序入门上午：

---

一、小程序账号申请：

1.1、到网站申请小程序开发账号

注册地址https://mp.weixin.qq.com/wxopen/waregister?action=step1
注册界面下图：

register.png

1.2、登录账号

登录账号，就可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。

setting.png

1.3、打开界面

first-program.png

1.4、第一个程序，默认启动模板

preview.jpg

二、通过代码加深小程序目录结构的认识

2.1、项目结构

项目的结构图，通过该图可以了解小程序中每个目录的作用

progremTree.png

2.2、结构图

项目的结构图，通过该图可以了解小程序中每个目录的作用

structure.png

三、微信小程序的“hello 小程序”

3.1、完成app层代码,

在app.json中创建如下代码，json不支持文档

{
  "pages":[
    "views/page1/page1"
  ]
}

app.js 设置

 App({
  /*
    其他的方法如何调用
  */
  foo(){
    return "bar"
  },
  num:100,
  data:{},

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   * 在es6的时候： onLaunch可以省略
   */
  onLaunch () {
    console.log('onlaunch')
  }

})

通过log日志看到代码onLaunch被打印了 说明该方法走了

3.2、创建一个页面

• 新建一个views文件夹，在views文件夹内创建page1文件夹
  page1文件夹里面创建page1.wxml

hello 微信

编译应用 发现微信小程序能展示内容

• 在同目录下创建一个page1.js

// views/page1/page1.js
// 通过getApp方法拿到全局应用程序对象,调用的是app.js里面的代码
const app=getApp()


Page({
    onLoad(){
      const msg=app.foo()
      console.log(msg)
      console.log(app.data)
      console.log(app.num)
    }
  }
)

• page1.wxss用于设置当前页面的css样式

/* wei xin sheet style
定义在页面里面的只能作用于当前界面 */
text{
  color: #f00;
  background-color:#00f
}

四、练习微信小程序如何实现页面添加，值传递，内容展示

4.1、添加页面

在app.json的全局配置页面添加list页面

{
  "pages":[
    "views/list/list",
    "views/page1/page1"
  ]
}

4.2、在list页面创建list.js list.json list.wxml list.wxss文件，实现页面内值传递

在list.js的页面创建页面的全局对象

Page({
  // 该对象的所有成员都可以被页面访问到
  data:{
      messsge: 'hello 小程序',
  },
   onLoad(){
    //  改变数据并呈现到页面上
       this.setData(
        {
            messsge:Date.now()
         }
       )
   }
})

4.3、获取页面js里面的数据对象

在list.wxml页面获取js文件的数据并展示到页面在关于text等标签的用法参考
https://developers.weixin.qq.com/miniprogram/dev/component/

 {{messsge}}

4.4、实现网络请求

• 在list.js中创建一个网络请求，查看开发平台的api
  https://developers.weixin.qq.com/miniprogram/dev/api/

 //获取一个api中的数据，不要使用ajax  api  因为ajax的api是bom的   bom是基于bs架构的  需要window窗口支持
      // 我们使用微信的api  网络请求的api  和jquery的特别像
const _this=this
wx.request({
        url: 'http://t.yushu.im/v2/movie/in_theaters', // 仅为示例，并非真实的接口地址
        data: {},
        header: {
          'content-type': 'application/json' // 默认值
        },
        success(res) {
          console.log(res.data)
          _this.setData(
            {
              list:res.data.subjects
            }
          )
        }
      })

注意这个需要后台的支持，否则有可能拿不到数据：
https://blog.csdn.net/github_39570717/article/details/83272210

• 请求回来数据后通过模板文件遍历并展示 在list.wxml文件中
  
  
  {{ item.title }}
  
  

• 如果想添加样式 只需要在wxss类中添加即可
  .item{
  border: 1px solid red;
  }
  完整效果如下图：

  
  
  xiaochengxudemo1.png