在产品页面上再添加一个产品的详细描述 .. 先用一组 View .. 去包装一下之前在产品页面上添加的这块视图 ..

然后在这个 card 的下面 .. 再添加一个 View .. 里面可以输出产品的描述 .. 因为描述里面带着一些 html 标签，所以可以使用 RichText 组件 .. 提供一个 nodes 属性 .. 值是 product 里 description ..

现在产品页面上会显示产品的详细描述 .. 如果内容里的 html 元素上包含 css 类，你可以利用这些类去定制内容的样式 ..

下面我们再试一下另外一种方法 .. 用一下 wxParse .. 打开 wxParse 的仓库 .. 把它下载下来 .. 下载 zip 格式的压缩包 .. 找到下载之后的压缩包 .. 解压一下 .. 打开解压之后的目录 .. 可以把这里的 wxParse 这个目录放在我们的项目里面 ..

打开项目的 src .. components .. 新建一个组件目录 .. 名字是 rich-text-wx-parse .. 打开它 .. 再把 wxParse 这个目录拖放到这个组件目录的下面 ... 回到编辑器 .. 找到组件下面的 rich-text-wx-parse .. 在它里面新建一个 index.js ..

在这个文件里添加一个基本的组件 .. 组件的名字是 RichTextWxParse .. 组件里需要全局样式，所以可以添加一个 static options .. 把 addGlobalClass 设置成 true ..

在文件顶部再导入 wxParse .. 解构出来一个 wxParse .. 来自 wxParse 下面的 wxParse

在这个组件里再添加一个 componentDidMount 生命周期方法 .. 它里面用一下 wxParse .. 绑定的名字叫 content .. 格式是 html .. 数据是 this.props.content .. 目标是 this.$scope .. 图像边距设置成 0 ..

再处理一下组件的视图 .. 在这个 view 上面 .. 加上 className 属性 .. 它的值是 this.props.className ..

然后先要导入一个模板 .. 用 src 指定一下模板的位置 .. 当前目录下的 wxParse 下面的 wxParse.wxml ..

下面再用一下这个模板 .. template .. is wxParse .. data 是数据 .. 数据是 wxParseData:content.nodes ..

eslint 会在 template 上面提示错误 .. 选中它 .. command + . 选择在这个文件里禁用 react 禁用元素 .. 这样会在这个文件上添加一行特别的注释 ..

回到产品内容页面 .. 在文件顶部导入 RichTextWxParse .. 它的位置是上一级目录的上一级目录 components 下面的 rich-text-wx-parse ..

再去修改一下页面视图 .. 现在可以把 RichText .. 换成 RichTextWxParse .. 要给它提供一个 content 属性 ..

在这个组件上面添加几个 css 类 .. 添加一个 mx-3 .. my-5 ... 回到模拟器，可以预览一下产品内容页面 ..

下面再去设计一下 wxParse 的样式 .. 在应用的样式里面添加一个 _wxparse.scss ... 里面添加一个 .wxParse .. 再嵌套一些样式 .. &-h3 .. 在 h3 标题上会有一个 wxParse-h3 css 类 .. 用 font-size 设置一下字号 .. $font-size-lg ..

再把 font-weight 设置成 blod .. 再用 margin-bottom .. 设置 $spacing-v-lg ..

下面再嵌套一个 $-p .. 在段落元素上会添加这个类 ..

先用 margin-bottom 给它添加点下边距 .. 然后用 color 设置一下文字的颜色 .. $color-black-1 ... 再用 line-height 把行间距设置成 1.8

最后再设置一下字号 .. 大小是 $font-size-base ..

下面可以再打开 card 这个样式 .. 找到它里面的 card-text 样式 ... 添加一个 color 属性 .. 颜色设置成 $color-black-1 ..

打开 app.scss .. 导入刚才创建的 wxparse .

再去预览一下现在的产品内容页面 .....