【重点突破】—— UniApp微信小程序开发教程学习Three

一、实战

• HBuilderX：在微信小程序中运行页面，需要设置->安全 开启微信小程序服务端口，HBuilder工具->设置->配置程序路径

1. 网络请求、模板语法、打开页面、页面传参
2. 列表  api:  https://unidemo.dcloud.net.cn/api/news

   - 返回数据格式
   - id 新闻id 如： 72980
   - title 标题
   - created_at 创建时间
   - author_avatar 图标

3. 详情  地址：

   https://unidemo.dcloud.net.cn/api/news/36kr/ + id  ( id 为新闻id，上个页面传过来的）　　

4. 使用 rich-text 【富文本组件来展示新闻内容】

   <rich-text class="richText" :nodes="strings" ></rich-text>

5. pages：新建页面 -> 就会多一个文件夹 里面包含一个 同名.vue文件

• 网络请求 api

  onLoad: function() {
        快捷写法 -> ureq
  }
  

  请求列表数据：

  onLoad:function(){
        uni.request({
              url: 'https://unidemo.dcloud.net.cn/api/news',
              method: 'GET',
              data: {},
              success: res => {
                   console.log(res)
              },
              fail: () => {},
              complete: () => {}
        });
  }

• 页面跳转（打开页面） - 两种方式

  //  ①   <navigator url=""></navigator>
  
  //  ②   @tap="openinfo"       //监听单击事件
  
  //       快捷写法 : me -> 选择 Vue methods方法代码块
  
  //       unav -> 选择 uni.navigateTo({ 代码块 })
  
  methods: {
       openi