一、实战
- HBuilderX:在微信小程序中运行页面,需要设置->安全 开启微信小程序服务端口,HBuilder工具->设置->配置程序路径
- 网络请求、模板语法、打开页面、页面传参
- 列表 api: https://unidemo.dcloud.net.cn/api/news
- 返回数据格式 - id 新闻id 如: 72980 - title 标题 - created_at 创建时间 - author_avatar 图标
- 详情 地址:
https://unidemo.dcloud.net.cn/api/news/36kr/ + id ( id 为新闻id,上个页面传过来的)
- 使用 rich-text 【富文本组件来展示新闻内容】
<rich-text class="richText" :nodes="strings" ></rich-text>
- 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