周大胖子 发表于 2020-4-26 17:22:39

微信小程序,公共头部底部都引入,npm公共样式图标的引...

=============================================================================0426 笔记================================================
   4. 怎么自定义 顶部呢?

                        参考链接: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9
                       
                               
                        其实直接在app.json 里配置
                        {navigationStyle:"custom"}
                       


   5.如何引入 公共头部与底部?

                        一种是组件式;一种是page式 【用这个】;
                       
                        5.1 在app.json 中 的page 中写:
                                       
                                                "pages/module/footer"
                                               
                        5.2 在出现的module/footer.wxml中写: 代码

                        5.3 在需要的位置,例如index.wxml 中写入代码
                                       
                                <include src="../module/footer.wxml"/>
                               
       
        6. 如何用到 自定义都图标,导航样式
                               
                        6.0 让我惊叹微信的神奇吧 ;啥坑爹的操作文档;
                       
                        6.1 第一步:打开cmd,在小程序的根目录,初始化npm   
                                               
                                                执行代码 :npm init
                                               
                                                name 项目名称;version 项目的版本号;description 项目的描述信息;entry point 项目的入口文件;

                                                test command 项目启动时脚本命令(npm test);git repositoryGit 地址

                                               keywords 关键词;author 作者;license 项目要发行的时候需要的证书
                               
                        6.2 第二步: 执行命令,进行安装 npm 微信样式的包
                                       
                                                执行代码 :npm install --save weui-miniprogram
                       
                        6.3 第三步: npm 进行构建
                       
                                                操作方式:微信开发者工具==》工具(开发工具导航栏)==》构建npm   
                                               
                        6.4 第四步: npm构建进行本地设置
                       
                                                微信开发者工具==》详情==》本地设置==》使用npm模块(勾选)
                       
                        6.5 第五步: 在app.wxss引入全局样式
                       
                                                @import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
                       
                        6.6 第六步: 实例demo展示
                       
                                        6.6.1首先在页面的 json 文件加入 usingComponents 配置字段
                                       
                                        {
                                                "usingComponents": {
                                                        "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
                                                }
                                        }
                                       
                                        6.6.2 去页面里 丢代码去
                                               
                                        <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
                                                <view>test content</view>
                                        </mp-dialog>
                                       
                                       
                        6.7 注意事项 : 需要的就引入 不需要的 不要瞎进入 比方说 我需要图标 只需要这么写
                       
                                        {
                                                "usingComponents": {
                                                        "mp-icon": "/miniprogram_npm/weui-miniprogram/icon/icon"
                                                }
                                        }
                                       
                                然后跑到:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html找个类 就行了
                               

                参考链接:https://blog.csdn.net/weixin_40802058/java/article/details/104182352

页: [1]
查看完整版本: 微信小程序,公共头部底部都引入,npm公共样式图标的引...